Replace font awesome font with svg

src/components/spotIcon.vue

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