Replaced searchInput with local icon

src/components/SearchInput.vue

@@ -1,14 +1,7 @@
 <template>
   <div>
     <div class="search" :class="{ active: focusingInput }">
-      <svg
+      <IconSearch class="search-icon" tabindex="-1" />
-        class="search-icon"
-        tabindex="-1"
-        fill="currentColor"
-        @click="handleSubmit"
-      >
-        <use xlink:href="#iconSearch"></use>
-      </svg>
 
       <input
         ref="input"
@@ -53,6 +46,7 @@ import { mapActions, mapGetters } from "vuex";
 import SeasonedButton from "@/components/ui/SeasonedButton";
 import AutocompleteDropdown from "@/components/AutocompleteDropdown";
 
+import IconSearch from "src/icons/IconSearch";
 import IconClose from "src/icons/IconClose";
 import config from "@/config.json";
 
@@ -61,7 +55,8 @@ export default {
   components: {
     SeasonedButton,
     AutocompleteDropdown,
-    IconClose
+    IconClose,
+    IconSearch
   },
   data() {
     return {
@@ -225,7 +220,7 @@ hr {
   }
 
   .search-icon {
-    fill: var(--color-green);
+    stroke: var(--color-green);
   }
 }
 
@@ -275,8 +270,8 @@ hr {
   &-icon {
     width: 20px;
     height: 20px;
-    fill: $text-color-50;
+    stroke: var(--text-color-50);
-    transition: fill 0.5s ease;
+    transition: stroke 0.5s ease;
     pointer-events: none;
     position: absolute;
     left: 15px;

src/icons/IconSearch.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <circle cx="11" cy="11" r="8"></circle>
+    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+  </svg>
+</template>