Introduce component wrapper for svg icons

components/collections/add-collection.vue

@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("new_collection") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
+                <closeIcon class="material-icons" />
               </button>
             </div>
           </div>
@@ -44,8 +44,12 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
+  components: {
+    closeIcon,
+  },
   props: {
     show: Boolean,
   },

components/collections/add-folder.vue

@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("new_folder") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
+                <closeIcon class="material-icons" />
               </button>
             </div>
           </div>
@@ -44,8 +44,12 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
+  components: {
+    closeIcon,
+  },
   props: {
     show: Boolean,
     collection: Object,

components/collections/collection.vue

@@ -4,7 +4,7 @@
       <button class="icon" @click="toggleShowChildren">
         <i class="material-icons" v-show="!showChildren">arrow_right</i>
         <i class="material-icons" v-show="showChildren">arrow_drop_down</i>
-        <i class="material-icons">folder</i>
+        <folderIcon class="material-icons" />
         <span>{{ collection.name }}</span>
       </button>
       <div>
@@ -35,7 +35,7 @@
             </div>
             <div>
               <button class="icon" @click="removeCollection" v-close-popover>
-                <i class="material-icons">delete</i>
+                <deleteIcon class="material-icons" />
                 <span>{{ $t("delete") }}</span>
               </button>
             </div>
@@ -98,8 +98,11 @@ ul li {
 
 <script>
 import { fb } from "~/helpers/fb"
+import folderIcon from "~/static/icons/folder-24px.svg?inline"
+import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
+  components: { folderIcon, deleteIcon },
   props: {
     collectionIndex: Number,
     collection: Object,

components/collections/edit-collection.vue

@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("edit_collection") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
+                <closeIcon class="material-icons" />
               </button>
             </div>
           </div>
@@ -44,8 +44,12 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
+  components: {
+    closeIcon,
+  },
   props: {
     show: Boolean,
     editingCollection: Object,

components/collections/edit-folder.vue

@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("edit_folder") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
+                <closeIcon class="material-icons" />
               </button>
             </div>
           </div>
@@ -39,8 +39,12 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
+  components: {
+    closeIcon,
+  },
   props: {
     show: Boolean,
     collection: Object,

components/collections/edit-request.vue

@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("edit_request") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
+                <closeIcon class="material-icons" />
               </button>
             </div>
           </div>
@@ -70,8 +70,12 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
+  components: {
+    closeIcon,
+  },
   props: {
     show: Boolean,
     collectionIndex: Number,

components/collections/folder.vue

@@ -22,7 +22,7 @@
           </div>
           <div>
             <button class="icon" @click="removeFolder" v-close-popover>
-              <i class="material-icons">delete</i>
+              <deleteIcon class="material-icons" />
               <span>{{ $t("delete") }}</span>
             </button>
           </div>
@@ -72,8 +72,10 @@ ul li {
 
 <script>
 import { fb } from "~/helpers/fb"
+import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
+  components: { deleteIcon },
   props: {
     folder: Object,
     collectionIndex: Number,

components/collections/import-export-collections.vue

@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
+                <closeIcon class="material-icons" />
               </button>
             </div>
           </div>
@@ -77,8 +77,12 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
+  components: {
+    closeIcon,
+  },
   data() {
     return {
       fb,

components/collections/request.vue

@@ -23,7 +23,7 @@
         </div>
         <div>
           <button class="icon" @click="removeRequest" v-close-popover>
-            <i class="material-icons">delete</i>
+            <deleteIcon class="material-icons" />
             <span>{{ $t("delete") }}</span>
           </button>
         </div>
@@ -47,8 +47,10 @@ ul li {
 
 <script>
 import { fb } from "~/helpers/fb"
+import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
+  components: { deleteIcon },
   props: {
     request: Object,
     collectionIndex: Number,
@@ -68,13 +70,13 @@ export default {
       this.$store.commit("postwoman/selectRequest", { request: this.request })
     },
     removeRequest() {
-      if (!confirm( this.$t("are_you_sure_remove_request"))) return
+      if (!confirm(this.$t("are_you_sure_remove_request"))) return
       this.$store.commit("postwoman/removeRequest", {
         collectionIndex: this.collectionIndex,
         folderIndex: this.folderIndex,
         requestIndex: this.requestIndex,
       })
-	  this.$toast.error(this.$t("deleted"), {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
       })
       this.syncCollections()

components/collections/save-request-as.vue

@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("save_request_as") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
+                <closeIcon class="material-icons" />
               </button>
             </div>
           </div>
@@ -79,8 +79,12 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
+  components: {
+    closeIcon,
+  },
   props: {
     show: Boolean,
     editingRequest: Object,

components/environments/add-environment.vue

@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("new_environment") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
+                <closeIcon class="material-icons" />
               </button>
             </div>
           </div>
@@ -44,8 +44,12 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
+  components: {
+    closeIcon,
+  },
   props: {
     show: Boolean,
   },

components/environments/edit-environment.vue

@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("edit_environment") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
+                <closeIcon class="material-icons" />
               </button>
             </div>
           </div>
@@ -75,7 +75,7 @@
               v-tooltip.bottom="$t('delete')"
               id="variable"
             >
-              <i class="material-icons">delete</i>
+              <deleteIcon class="material-icons" />
             </button>
           </li>
         </div>
@@ -107,8 +107,14 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
+import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
+  components: {
+    closeIcon,
+    deleteIcon,
+  },
   props: {
     show: Boolean,
     editingEnvironment: Object,

components/environments/environment.vue

@@ -23,7 +23,7 @@
         </div>
         <div>
           <button class="icon" @click="removeEnvironment" v-close-popover>
-            <i class="material-icons">delete</i>
+            <deleteIcon class="material-icons" />
             <span>{{ $t("delete") }}</span>
           </button>
         </div>
@@ -47,8 +47,10 @@ ul li {
 
 <script>
 import { fb } from "~/helpers/fb"
+import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
+  components: { deleteIcon },
   props: {
     environment: Object,
     environmentIndex: Number,
@@ -64,7 +66,7 @@ export default {
     removeEnvironment() {
       if (!confirm(this.$t("are_you_sure_remove_environment"))) return
       this.$store.commit("postwoman/removeEnvironment", this.environmentIndex)
-	  this.$toast.error(this.$t("deleted"), {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
       })
       this.syncEnvironments()

components/environments/import-export-environment.vue

@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("import_export") }} {{ $t("environments") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
+                <closeIcon class="material-icons" />
               </button>
             </div>
           </div>
@@ -77,8 +77,12 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
+  components: {
+    closeIcon,
+  },
   data() {
     return {
       fb,

components/firebase/feeds.vue

@@ -8,7 +8,7 @@
           </label>
         </li>
         <button class="icon" @click="deleteFeed(feed)">
-          <i class="material-icons">delete</i>
+          <deleteIcon class="material-icons" />
         </button>
       </div>
       <div class="show-on-large-screen">
@@ -50,8 +50,10 @@ ol {
 
 <script>
 import { fb } from "~/helpers/fb"
+import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
+  components: { deleteIcon },
   data() {
     return {
       fb,

components/firebase/inputform.vue

@@ -30,7 +30,7 @@
           value="Save"
           @click="formPost"
         >
-          <i class="material-icons">add</i>
+          <addIcon class="material-icons" />
           <span>Add</span>
         </button>
       </div>
@@ -47,8 +47,10 @@ ol {
 
 <script>
 import { fb } from "~/helpers/fb"
+import addIcon from "~/static/icons/add-24px.svg?inline"
 
 export default {
+  components: { addIcon },
   data() {
     return {
       message: null,

components/firebase/logout.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <button class="icon" @click="logout" v-close-popover>
-      <i class="material-icons">exit_to_app</i>
+      <exitToAppIcon class="material-icons" />
       <span>{{ $t("logout") }}</span>
     </button>
   </div>
@@ -10,8 +10,10 @@
 <script>
 import firebase from "firebase/app"
 import { fb } from "~/helpers/fb"
+import exitToAppIcon from "~/static/icons/exit_to_app-24px.svg?inline"
 
 export default {
+  components: { exitToAppIcon },
   data() {
     return {
       fb,

components/layout/history.vue

@@ -70,7 +70,7 @@
                   :aria-label="$t('delete')"
                   v-close-popover
                 >
-                  <i class="material-icons">delete</i>
+                  <deleteIcon class="material-icons" />
                   <span>{{ $t("delete") }}</span>
                 </button>
               </div>
@@ -238,7 +238,7 @@
             @click="disableHistoryClearing"
             v-tooltip="$t('no')"
           >
-            <i class="material-icons">close</i>
+            <closeIcon class="material-icons" />
           </button>
         </div>
       </div>
@@ -308,11 +308,17 @@ ol {
 <script>
 import { findStatusGroup } from "~/pages/index"
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
+import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 const updateOnLocalStorage = (propertyName, property) =>
   window.localStorage.setItem(propertyName, JSON.stringify(property))
 
 export default {
+  components: {
+    closeIcon,
+    deleteIcon,
+  },
   data() {
     return {
       history:

components/layout/pw-header.vue

@@ -122,7 +122,7 @@
               <h3 class="title">{{ $t("extensions") }}</h3>
               <div>
                 <button class="icon" @click="showExtensions = false">
-                  <i class="material-icons">close</i>
+                  <closeIcon class="material-icons" />
                 </button>
               </div>
             </div>
@@ -182,7 +182,7 @@
               <h3 class="title">{{ $t("shortcuts") }}</h3>
               <div>
                 <button class="icon" @click="showShortcuts = false">
-                  <i class="material-icons">close</i>
+                  <closeIcon class="material-icons" />
                 </button>
               </div>
             </div>
@@ -217,7 +217,7 @@
               <h3 class="title">{{ $t("support_us") }}</h3>
               <div>
                 <button class="icon" @click="showSupport = false">
-                  <i class="material-icons">close</i>
+                  <closeIcon class="material-icons" />
                 </button>
               </div>
             </div>
@@ -269,8 +269,12 @@ import {
 import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import firebase from "firebase/app"
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
+  components: {
+    closeIcon,
+  },
   data() {
     return {
       // Once the PWA code is initialized, this holds a method

components/layout/sidenav.vue

@@ -64,7 +64,7 @@
         <ul>
           <li>
             <a href="#request" v-tooltip.right="$t('request')">
-              <i class="material-icons">cloud_upload</i>
+              <cloudUploadIcon class="material-icons" />
             </a>
           </li>
           <li>
@@ -85,7 +85,7 @@
         <ul>
           <li>
             <a href="#request" v-tooltip.right="$t('request')">
-              <i class="material-icons">cloud_upload</i>
+              <cloudUploadIcon class="material-icons" />
             </a>
           </li>
           <li>
@@ -111,7 +111,7 @@
           </li>
           <li>
             <a href="#query" v-tooltip.right="$t('query')">
-              <i class="material-icons">cloud_upload</i>
+              <cloudUploadIcon class="material-icons" />
             </a>
           </li>
           <li>
@@ -127,7 +127,7 @@
         <ul>
           <li>
             <a href="#import" v-tooltip.right="$t('import')">
-              <i class="material-icons">folder</i>
+              <folderIcon class="material-icons" />
             </a>
           </li>
           <li>
@@ -306,7 +306,14 @@ nav.secondary-nav {
 </style>
 
 <script>
+import cloudUploadIcon from "~/static/icons/cloud_upload-24px.svg?inline"
+import folderIcon from "~/static/icons/folder-24px.svg?inline"
+
 export default {
+  components: {
+    cloudUploadIcon,
+    folderIcon,
+  },
   methods: {
     linkActive(path) {
       return {
@@ -315,14 +322,12 @@ export default {
       }
     },
   },
-
   mounted() {
     window.addEventListener("scroll", (event) => {
       let mainNavLinks = document.querySelectorAll("nav ul li a")
       let fromTop = window.scrollY
       mainNavLinks.forEach(({ hash, classList }) => {
         let section = document.querySelector(hash)
-
         if (
           section &&
           section.offsetTop <= fromTop &&
@@ -335,11 +340,10 @@ export default {
       })
     })
   },
-
-  watch: {
-    $route() {
-      // this.$toast.clear();
-    },
-  },
+  // watch: {
+  //   $route() {
+  //     // this.$toast.clear();
+  //   },
+  // },
 }
 </script>