82 lines
1.7 KiB
Vue
82 lines
1.7 KiB
Vue
<script>
|
|
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
|
|
import { getIcon } from '@scripts/icons';
|
|
|
|
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
|
|
].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" class="spot-icon-box">
|
|
<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>
|
|
|
|
<style lang="scss" scoped>
|
|
@use "@styles/var";
|
|
|
|
.spot-icon-box {
|
|
display: flex;
|
|
gap: var.$elem-spacing;
|
|
align-items: center;
|
|
|
|
span {
|
|
flex: 1 1 auto;
|
|
}
|
|
}
|
|
|
|
.spot-icon {
|
|
&.margin-right {
|
|
margin-right: var.$elem-spacing;
|
|
}
|
|
|
|
&.margin-left {
|
|
margin-left: var.$elem-spacing;
|
|
}
|
|
}
|
|
</style>
|