Rename Spot to Livetrail internally

src/components/AppIcon.vue

@@ -0,0 +1,96 @@
+<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: {
+		iconClassNames() {
+			return [
+				'app-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" :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>