58 lines
1.5 KiB
Vue
58 lines
1.5 KiB
Vue
<script>
|
|
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
|
|
import { getIcon } from '../scripts/icons.js';
|
|
|
|
export default {
|
|
components: {
|
|
FontAwesomeIcon
|
|
},
|
|
props: {
|
|
icon: String,
|
|
width: String,
|
|
size: String,
|
|
classes: String,
|
|
title: String,
|
|
text: String,
|
|
margin: String,
|
|
textClasses: String,
|
|
transform: String
|
|
},
|
|
computed: {
|
|
classNames() {
|
|
return [
|
|
'spot-icon',
|
|
this.icon,
|
|
...(this.classes || '').split(/\s+/),
|
|
this.margin?'margin-'+this.margin:null || this.hasText?'margin-right':null
|
|
].filter(Boolean).join(' ');
|
|
},
|
|
resolvedFixedWidth() {
|
|
return (this.width == 'fixed') || null;
|
|
},
|
|
resolvedAutoWidth() {
|
|
return (this.width == 'auto') || null;
|
|
},
|
|
hasText() {
|
|
return this.text && this.text != '';
|
|
},
|
|
iconDefinition() {
|
|
return getIcon(this.icon);
|
|
},
|
|
resolvedSize() {
|
|
return this.size || null;
|
|
},
|
|
resolvedTransform() {
|
|
return this.transform || null;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<span :title="title" v-if="title || hasText">
|
|
<FontAwesomeIcon :icon="iconDefinition" :class="classNames" :fixed-width="resolvedFixedWidth" :width-auto="resolvedAutoWidth" :size="resolvedSize" :transform="resolvedTransform" />
|
|
<span v-if="hasText" :class="textClasses">{{ text }}</span>
|
|
</span>
|
|
<FontAwesomeIcon v-else :icon="iconDefinition" :class="classNames" :fixed-width="resolvedFixedWidth" :width-auto="resolvedAutoWidth" :size="resolvedSize" :transform="resolvedTransform" />
|
|
</template>
|