Fix FA auto width

src/components/spotIcon.vue

@@ -8,13 +8,12 @@ export default {
 	},
 	props: {
 		icon: String,
-		fixedWidth: Boolean,
-		rotation: [Number, String],
+		width: String,
 		size: String,
 		classes: String,
 		title: String,
 		text: String,
-		margin: Boolean,
+		margin: String,
 		textClasses: String,
 		transform: String
 	},
@@ -23,12 +22,15 @@ export default {
 			return [
 				'spot-icon',
 				this.icon,
-				...(this.classes || '').split(/\s+/).filter(Boolean),
-				...(this.margin || this.hasText ? ['push'] : [])
+				...(this.classes || '').split(/\s+/),
+				this.margin?'margin-'+this.margin:null || this.hasText?'margin-right':null
 			].filter(Boolean).join(' ');
 		},
 		resolvedFixedWidth() {
-			return this.fixedWidth || null;
+			return (this.width == 'fixed') || null;
+		},
+		resolvedAutoWidth() {
+			return (this.width == 'auto') || null;
 		},
 		hasText() {
 			return this.text && this.text != '';
@@ -36,9 +38,6 @@ export default {
 		iconDefinition() {
 			return getIcon(this.icon);
 		},
-		resolvedRotation() {
-			return this.rotation || null;
-		},
 		resolvedSize() {
 			return this.size || null;
 		},
@@ -51,8 +50,8 @@ export default {
 
 <template>
 	<span :title="title" v-if="title || hasText">
-		<FontAwesomeIcon :icon="iconDefinition" :class="classNames" :fixed-width="resolvedFixedWidth" :rotation="resolvedRotation" :size="resolvedSize" :transform="resolvedTransform" />
+		<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" :rotation="resolvedRotation" :size="resolvedSize" :transform="resolvedTransform" />
+	<FontAwesomeIcon v-else :icon="iconDefinition" :class="classNames" :fixed-width="resolvedFixedWidth" :width-auto="resolvedAutoWidth" :size="resolvedSize" :transform="resolvedTransform" />
 </template>