89 lines
1.6 KiB
Vue
89 lines
1.6 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: {
|
|
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" :class="hasText?'app-icon-with-text':null">
|
|
<span class="app-icon-symbol">
|
|
<FontAwesomeIcon
|
|
:icon="iconDefinition"
|
|
:class="['app-icon', this.icon, this.classes, this.margin?'margin-'+this.margin:null]"
|
|
:fixed-width="resolvedFixedWidth"
|
|
:width-auto="resolvedAutoWidth"
|
|
:size="resolvedSize"
|
|
:transform="resolvedTransform"
|
|
/>
|
|
</span>
|
|
<span v-if="hasText" :class="['app-icon-text', textClasses]">{{ text }}</span>
|
|
</span>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@use "@styles/var";
|
|
|
|
.app-icon-with-text {
|
|
display: inline-flex;
|
|
align-items: flex-start;
|
|
gap: var.$text-spacing;
|
|
|
|
.app-icon-symbol {
|
|
flex: 0 0 auto;
|
|
align-self: center;
|
|
}
|
|
|
|
.app-icon-text {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
align-self: center;
|
|
}
|
|
}
|
|
|
|
.app-icon {
|
|
&.margin-right {
|
|
margin-right: var.$text-spacing;
|
|
}
|
|
|
|
&.margin-left {
|
|
margin-left: var.$text-spacing;
|
|
}
|
|
}
|
|
</style>
|