Load SVG icons natively through unplugin, clean-up

Author: m-mohr

babel.config.js

@@ -3,7 +3,6 @@ module.exports = {
     '@vue/cli-plugin-babel/preset'
   ],
   plugins: [
-    "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-class-properties"
   ]
 };

package.json

@@ -72,7 +72,6 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.28.4",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@iconify-json/bi": "^1.2.6",
     "@vue/cli-plugin-babel": "^5.0.9",
     "@vue/cli-plugin-eslint": "^5.0.9",

src/components/MapView.vue

@@ -245,7 +245,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../node_modules/ol/ol.css";
+@import "ol/ol.css";
 
 #stac-browser {
   .map-popover {

src/components/SocialSharing.vue

@@ -1,17 +1,27 @@
 <template>
   <section>
     <b-button v-for="href, service in urls" :key="service" class="service me-1" :class="service" :href="href" target="_blank">
-      <i class="svg" :class="service" /> {{ $t(`source.share.${service}`) }}
+      <component :is="`icon-${service}`" /> {{ $t(`source.share.${service}`) }}
     </b-button>
   </section>
 </template>
 
 
 <script>
 import { mapState } from 'vuex';
+import IconBsky from '~icons/share/bsky';
+import IconEmail from '~icons/share/email';
+import IconMastodon from '~icons/share/mastodon';
+import IconX from '~icons/share/x';
 
 export default {
   name: "SocialSharing",
+  components: {
+    IconBsky,
+    IconEmail,
+    IconMastodon,
+    IconX
+  },
   props: {
     text: {
       type: String,
@@ -58,29 +68,3 @@ export default {
   }
 };
 </script>
-
-<style lang="scss" scoped>
-.service .svg {
-  display: inline-block;
-  vertical-align: sub;
-  height: 1em;
-  width: 1em;
-  background-color: #fff;
-  mask-size: 1em 1em;
-  mask-repeat: no-repeat;
-  mask-position: center;
-
-  &.email {
-    mask-image: url('@/media/email.svg');
-  }
-  &.bsky {
-    mask-image: url('@/media/bsky.svg');
-  }
-  &.mastodon {
-    mask-image: url('@/media/mastodon.svg');
-  }
-  &.x {
-    mask-image: url('@/media/x.svg');
-  }
-}
-</style>

src/components/maps/MapSelect.vue

@@ -198,5 +198,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../../node_modules/ol/ol.css";
+@import "ol/ol.css";
 </style>

vue-svg-loader.js

@@ -3,6 +3,7 @@ const { hideBin } = require('yargs/helpers');
 const path = require('path');
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 const Icons = require('unplugin-icons/webpack');
+const { FileSystemIconLoader } = require('unplugin-icons/loaders');
 const Components = require('unplugin-vue-components/webpack');
 const IconsResolver = require('unplugin-icons/resolver');
 const { BootstrapVueNextResolver } = require('bootstrap-vue-next/resolvers');
@@ -55,7 +56,6 @@ const vueConfig = {
       args[0].STAC_BROWSER_VERSION = JSON.stringify(pkgFile.version);
       args[0].CONFIG_PATH = JSON.stringify(configFile);
       args[0].CONFIG_CLI = JSON.stringify(argv);
-      args[0].__VUE_OPTIONS_API__ = true;
       return args;
     });
 
@@ -110,12 +110,16 @@ const vueConfig = {
             enabledCollections: ['bi'],
             alias: {
               'b-icon': 'bi'
-            }
+            },
+            customCollections: ['share'],
           })
         ]
       }),
       Icons({
         compiler: 'vue3',
+        customCollections: {
+          'share': FileSystemIconLoader('./src/media/'),
+        },
       }),
     ]
   },