SVG icon prerequisites

package.json

@@ -9,8 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^3.0.0",
-    "vue-class-component": "^8.0.0-0"
+    "vue": "^3.0.0"
   },
   "devDependencies": {
     "@types/leaflet": "^1.5.19",
@@ -27,12 +26,13 @@
     "eslint": "^7.5.0",
     "eslint-plugin-vue": "^7.0.0-0",
     "leaflet": "^1.7.1",
-    "leaflet-pixi-overlay": "^1.8.1",
     "normalize-scss": "^7.0.1",
-    "pixi.js": "^5.3.3",
     "sass": "^1.29.0",
     "sass-loader": "^10.1.0",
+    "svgo": "^1.1.0",
+    "svgo-loader": "^2.1.0",
     "typescript": "~3.9.3",
+    "vue-cli-plugin-svg-sprite": "~1.0.0",
     "vuex": "^4.0.0-rc.1"
   },
   "eslintConfig": {

src/components/SvgIcon.vue

@@ -0,0 +1,47 @@
+<template>
+  <svg :class="className" xmlns="http://www.w3.org/2000/svg">
+    <title v-if="title">{{ title }}</title>
+    <use :xlink:href="iconPath" xmlns:xlink="http://www.w3.org/1999/xlink"/>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'svg-icon',
+
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+
+    title: {
+      type: String,
+      default: null
+    }
+  },
+
+  computed: {
+    iconPath() {
+      let icon = require(`@/assets/icons/${this.name}.svg`);
+      if (Object.prototype.hasOwnProperty.call(icon, 'default')) {
+        icon = icon.default;
+      }
+
+      return icon.url;
+    },
+
+    className() {
+      return 'svg-icon svg-icon--' + this.name;
+    }
+  }
+};
+</script>
+
+<style>
+  .svg-icon {
+    fill: currentColor;
+    height: 24px;
+    width: 24px;
+  }
+</style>

src/index.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}

vue.config.js

@@ -1,3 +1,10 @@
 module.exports = {
-  publicPath: '',
+	publicPath: '',
+
+	chainWebpack: config => {
+		config.module
+			.rule('svg-sprite')
+			.use('svgo-loader')
+			.loader('svgo-loader')
+	}
 }