Introduce component wrapper for svg icons

pages/doc.vue

@@ -19,7 +19,7 @@
                     @click="$refs.collectionUpload.click()"
                     v-tooltip="$t('json')"
                   >
-                    <i class="material-icons">folder</i>
+                    <folderIcon class="material-icons" />
                     <span>{{ $t("import_collections") }}</span>
                   </button>
                 </label>
@@ -75,7 +75,7 @@
           <div>
             <span class="collection" v-for="(collection, index) in this.items" :key="index">
               <h2>
-                <i class="material-icons">folder</i>
+                <folderIcon class="material-icons" />
                 {{ collection.name || $t("none") }}
               </h2>
               <span class="folder" v-for="(folder, index) in collection.folders" :key="index">
@@ -326,7 +326,10 @@
 </style>
 
 <script>
+import folderIcon from "~/static/icons/folder-24px.svg?inline"
+
 export default {
+  components: { folderIcon },
   data() {
     return {
       collectionJSON: "[]",

pages/graphql.vue

@@ -77,7 +77,7 @@
                   v-tooltip.bottom="$t('delete')"
                   id="header"
                 >
-                  <i class="material-icons">delete</i>
+                  <deleteIcon class="material-icons" />
                 </button>
               </li>
             </div>
@@ -334,8 +334,10 @@ import * as gql from "graphql"
 import { commonHeaders } from "~/helpers/headers"
 import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import { sendNetworkRequest } from "~/helpers/network"
+import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
+  components: { deleteIcon },
   data() {
     return {
       commonHeaders,

pages/index.vue

@@ -317,7 +317,7 @@
                       v-tooltip.bottom="$t('delete')"
                       id="delParam"
                     >
-                      <i class="material-icons">delete</i>
+                      <deleteIcon class="material-icons" />
                     </button>
                   </li>
                 </div>
@@ -500,7 +500,7 @@
                         v-tooltip.bottom="$t('delete')"
                         id="param"
                       >
-                        <i class="material-icons">delete</i>
+                        <deleteIcon class="material-icons" />
                       </button>
                     </li>
                   </div>
@@ -629,7 +629,7 @@
                           @click="showTokenRequest = false"
                           v-tooltip.bottom="$t('close')"
                         >
-                          <i class="material-icons">close</i>
+                          <closeIcon class="material-icons" />
                         </button>
                       </div>
                     </div>
@@ -782,7 +782,7 @@
                         v-tooltip.bottom="$t('delete')"
                         id="header"
                       >
-                        <i class="material-icons">delete</i>
+                        <deleteIcon class="material-icons" />
                       </button>
                     </li>
                   </div>
@@ -987,7 +987,7 @@
                 <h3 class="title">{{ $t("import_curl") }}</h3>
                 <div>
                   <button class="icon" @click="showModal = false">
-                    <i class="material-icons">close</i>
+                    <closeIcon class="material-icons" />
                   </button>
                 </div>
               </div>
@@ -1029,7 +1029,7 @@
                 <h3 class="title">{{ $t("generate_code") }}</h3>
                 <div>
                   <button class="icon" @click="isHidden = true">
-                    <i class="material-icons">close</i>
+                    <closeIcon class="material-icons" />
                   </button>
                 </div>
               </div>
@@ -1086,7 +1086,7 @@
                 <h3 class="title">{{ $t("manage_token") }}</h3>
                 <div>
                   <button class="icon" @click="showTokenList = false">
-                    <i class="material-icons">close</i>
+                    <closeIcon class="material-icons" />
                   </button>
                 </div>
               </div>
@@ -1142,7 +1142,7 @@
                   @click="removeOAuthToken(index)"
                   v-tooltip.bottom="$t('delete')"
                 >
-                  <i class="material-icons">delete</i>
+                  <deleteIcon class="material-icons" />
                 </button>
               </li>
             </div>
@@ -1162,7 +1162,7 @@
                 <h3 class="title">{{ $t("manage_token_req") }}</h3>
                 <div>
                   <button class="icon" @click="showTokenRequestList = false">
-                    <i class="material-icons">close</i>
+                    <closeIcon class="material-icons" />
                   </button>
                 </div>
               </div>
@@ -1189,7 +1189,7 @@
                     @click="removeOAuthTokenReq"
                     v-tooltip.bottom="$t('delete')"
                   >
-                    <i class="material-icons">delete</i>
+                    <deleteIcon class="material-icons" />
                   </button>
                 </div>
               </div>
@@ -1258,6 +1258,8 @@ import { hasPathParams, addPathParamsToVariables, getQueryParams } from "~/helpe
 import { parseUrlAndPath } from "~/helpers/utils/uri.js"
 import { httpValid } from "~/helpers/utils/valid"
 import { knownContentTypes, isJSONContentType } from "~/helpers/utils/contenttypes"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
+import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 const statusCategories = [
   {
@@ -1308,7 +1310,12 @@ const parseHeaders = (xhr) => {
 }
 export const findStatusGroup = (responseStatus) =>
   statusCategories.find(({ statusCodeRegex }) => statusCodeRegex.test(responseStatus))
+
 export default {
+  components: {
+    closeIcon,
+    deleteIcon,
+  },
   data() {
     return {
       showModal: false,