feat: use octicon instead of manually importing

app/components/TheHeader.vue

@@ -1,7 +1,10 @@
 <template>
   <header class="navbar">
     <div class="container">
-      <RouterLink to="/" class="logo">
+      <RouterLink
+        to="/"
+        class="logo"
+      >
         <img
           src="/spbr-uncolored-nostars-noring.png"
           alt="Logo"
@@ -22,11 +25,11 @@
           placeholder="Search"
         >
         <button class="search-btn">
-          <img
-            src="/search-24.svg"
+          <Icon
+            name="octicon:search-24"
             class="icon"
             alt="Search"
-          >
+          />
         </button>
       </div>
     </div>
@@ -118,16 +121,17 @@ const query = ref('')
   margin-left: 5px;
 }
 
-.icon {
-  height: 18px;
+:deep(.icon) {
   width: 18px;
-  filter: invert(1);
-  transition: filter 0.2s, transform 0.1s;
+  height: 18px;
+  color: #aaa;
+  fill: currentColor;
+  transition: color 0.2s, transform 0.1s;
   opacity: 0.8;
 }
 
-.search-btn:hover .icon {
-  filter: brightness(1.2) invert(1);
+.search-btn:hover :deep(.icon) {
+  color: #fff;
   transform: scale(1.1);
 }
 </style>