Use resolves

src/components/admin.vue

@@ -1,7 +1,7 @@
 <script>
-import SpotIcon from './spotIcon.vue';
-import SpotButton from './spotButton.vue';
-import AdminInput from './adminInput.vue';
+import SpotIcon from '@components/spotIcon';
+import SpotButton from '@components/spotButton';
+import AdminInput from '@components/adminInput';
 
 export default {
 	components: {

src/components/project.vue

@@ -4,14 +4,14 @@ import { Map, NavigationControl, Marker, LngLatBounds, LngLat, Popup } from 'map
 import { createApp, ref, provide, inject } from 'vue';
 import Simplebar from 'simplebar-vue';
 
-import lightbox from '../scripts/lightbox.js';
-import { getOuterWidth } from '../scripts/common.js';
+import lightbox from '@scripts/lightbox';
+import { getOuterWidth } from '@scripts/common';
 
-import SpotIcon from './spotIcon.vue';
-import SpotIconStack from './spotIconStack.vue';
-import SpotButton from './spotButton.vue';
-import ProjectPost from './projectPost.vue';
-import ProjectPopup from './projectPopup.vue';
+import SpotIcon from '@components/spotIcon';
+import SpotIconStack from '@components/spotIconStack';
+import SpotButton from '@components/spotButton';
+import ProjectPost from '@components/projectPost';
+import ProjectPopup from '@components/projectPopup';
 
 export default {
 	components: {

src/components/projectMediaLink.vue

@@ -1,6 +1,6 @@
 <script>
-import spotIcon from './spotIcon.vue';
-import projectRelTime from './projectRelTime.vue';
+import spotIcon from '@components/spotIcon';
+import projectRelTime from '@components/projectRelTime';
 
 export default {
 	components: {

src/components/projectPopup.vue

@@ -1,9 +1,9 @@
 <script>
-import projectMapLink from './projectMapLink.vue';
-import spotIcon from './spotIcon.vue';
-import projectRelTime from './projectRelTime.vue';
-import projectMediaLink from './projectMediaLink.vue';
-import { options } from '../scripts/lightbox';
+import projectMapLink from '@components/projectMapLink';
+import spotIcon from '@components/spotIcon';
+import projectRelTime from '@components/projectRelTime';
+import projectMediaLink from '@components/projectMediaLink';
+import { options } from '@scripts/lightbox';
 
 export default {
 	components: {

src/components/projectPost.vue

@@ -1,12 +1,12 @@
 <script>
-	import spotIcon from './spotIcon.vue';
-	import spotIconStack from './spotIconStack.vue';
-	import spotButton from './spotButton.vue';
-	import projectMediaLink from './projectMediaLink.vue';
-	import projectMapLink from './projectMapLink.vue';
-	import projectRelTime from './projectRelTime.vue';
+	import spotIcon from '@components/spotIcon';
+	import spotIconStack from '@components/spotIconStack';
+	import spotButton from '@components/spotButton';
+	import projectMediaLink from '@components/projectMediaLink';
+	import projectMapLink from '@components/projectMapLink';
+	import projectRelTime from '@components/projectRelTime';
 	import { LngLat } from 'maplibre-gl';
-	import { copyTextToClipboard } from '../scripts/common.js';
+	import { copyTextToClipboard } from '@scripts/common';
 
 	import autosize from 'autosize';
 

src/components/projectRelTime.vue

@@ -1,5 +1,5 @@
 <script>
-import spotIcon from './spotIcon.vue';
+import spotIcon from '@components/spotIcon';
 
 export default {
 	components: {

src/components/spotButton.vue

@@ -1,5 +1,5 @@
 <script>
-import SpotIcon from './spotIcon.vue';
+import SpotIcon from '@components/spotIcon';
 
 export default {
 	components: {

src/components/spotIcon.vue

@@ -1,6 +1,6 @@
 <script>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { getIcon } from '../scripts/icons.js';
+import { getIcon } from '@scripts/icons';
 
 export default {
 	components: {
@@ -55,3 +55,17 @@ export default {
 	</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 {
+	&.margin-right {
+		margin-right: var.$elem-spacing;
+	}
+
+	&.margin-left {
+		margin-left: var.$elem-spacing;
+	}
+}
+</style>

src/components/spotIconStack.vue

@@ -1,6 +1,6 @@
 <script>
 import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome';
-import spotIcon from './spotIcon.vue';
+import spotIcon from '@components/spotIcon';
 
 export default {
 	components: {

src/components/upload.vue

@@ -4,8 +4,8 @@ import Uppy from '@uppy/core';
 import XHRUpload from '@uppy/xhr-upload';
 import '@uppy/core/css/style.min.css';
 
-import SpotIcon from './spotIcon.vue';
-import SpotButton from './spotButton.vue';
+import SpotIcon from '@components/spotIcon';
+import SpotButton from '@components/spotButton';
 
 export default {
 	name: 'upload',