svg loader + bootstrap icons

src/components/InfobaseList.vue

@@ -12,7 +12,7 @@
     </div>
     <div v-else-if="0 == infobases.length">
       <div class="alert alert-warning" role="alert">
-        <Icon_Exclamation />
+        <svg class="m-2" width="32" height="32"><use xlink:href="#exclamation-triangle-fill--sprite"></use></svg>
         <span>Нет ни одной базы</span>
       </div>
     </div>
@@ -46,7 +46,7 @@
                     class="btn btn-sm btn-primary"
                     hint="Принять"
                   >
-                    <Icon_V />
+                    <svg width="16" height="16"><use xlink:href="#check-lg--sprite"></use></svg>
                   </button>
                   <button
                     type="button"
@@ -54,7 +54,7 @@
                     @click="cancel_edit_url(infobase.name)"
                     hint="Отменить"
                   >
-                    <Icon_X />
+                    <svg width="16" height="16"><use xlink:href="#x-lg--sprite"></use></svg>
                   </button>
                 </div>
               </form>
@@ -106,9 +106,10 @@
 
 <script>
 import axios from "axios";
-import Icon_V from "@/components/icons/icon-v.vue";
-import Icon_X from "@/components/icons/icon-x.vue";
-import Icon_Exclamation from "@/components/icons/icon-exclamation.vue";
+
+import "bootstrap-icons/icons/check-lg.svg?sprite"
+import "bootstrap-icons/icons/x-lg.svg?sprite"
+import "bootstrap-icons/icons/exclamation-triangle-fill.svg?sprite"
 
 const api_base = "http://localhost:17653/api/v1";
 
@@ -185,10 +186,5 @@ export default {
       this.loading_error = true;
     }
   },
-  components: {
-    Icon_V,
-    Icon_X,
-    Icon_Exclamation,
-  },
 };
 </script>

src/components/icons/icon-exclamation.vue

@@ -1,16 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    fill="currentColor"
-    class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2"
-    viewBox="0 0 16 16"
-    role="img"
-    aria-label="Warning:"
-  >
-    <path
-      d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"
-    />
-  </svg>
-</template>

src/components/icons/icon-v.vue

@@ -1,14 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    fill="currentColor"
-    class="bi bi-check-lg"
-    viewBox="0 0 16 16"
-  >
-    <path
-      d="M13.485 1.431a1.473 1.473 0 0 1 2.104 2.062l-7.84 9.801a1.473 1.473 0 0 1-2.12.04L.431 8.138a1.473 1.473 0 0 1 2.084-2.083l4.111 4.112 6.82-8.69a.486.486 0 0 1 .04-.045z"
-    />
-  </svg>
-</template>

src/components/icons/icon-x.vue

@@ -1,14 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    fill="currentColor"
-    class="bi bi-x-lg"
-    viewBox="0 0 16 16"
-  >
-    <path
-      d="M1.293 1.293a1 1 0 0 1 1.414 0L8 6.586l5.293-5.293a1 1 0 1 1 1.414 1.414L9.414 8l5.293 5.293a1 1 0 0 1-1.414 1.414L8 9.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L6.586 8 1.293 2.707a1 1 0 0 1 0-1.414z"
-    />
-  </svg>
-</template>