From 64bc40f341952fd9f69da19d7d12c2d938cd50a5 Mon Sep 17 00:00:00 2001
From: kittentm <aidenplayzroblox123@gmail.com>
Date: Wed, 13 May 2026 03:46:50 +0200
Subject: [PATCH] feat: use octicon instead of manually importing

---
 app/components/TheHeader.vue | 24 ++++++++++++++----------
 bun.lock                     | 18 ++++++++++++++----
 nuxt.config.ts               |  3 ++-
 package.json                 |  2 ++
 public/search-24.svg         |  1 -
 5 files changed, 32 insertions(+), 16 deletions(-)
 delete mode 100644 public/search-24.svg

diff --git a/app/components/TheHeader.vue b/app/components/TheHeader.vue
index 1939170..e37ee1a 100644
--- a/app/components/TheHeader.vue
+++ b/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>
diff --git a/bun.lock b/bun.lock
index 1863f95..d2eefe8 100644
--- a/bun.lock
+++ b/bun.lock
@@ -8,12 +8,14 @@
         "@iconify-json/lucide": "^1.2.106",
         "@iconify-json/simple-icons": "^1.2.81",
         "@nuxt/ui": "^4.7.1",
+        "@primer/octicons": "^19.25.0",
         "nuxt": "^4.4.5",
         "tailwindcss": "^4.3.0",
       },
       "devDependencies": {
         "@iconify-json/octicon": "^1.2.23",
         "@nuxt/eslint": "^1.15.2",
+        "@nuxt/icon": "^2.2.2",
         "eslint": "^10.3.0",
         "typescript": "^6.0.3",
         "vue-tsc": "^3.2.8",
@@ -201,7 +203,7 @@
 
     "@iconify-json/simple-icons": ["@iconify-json/simple-icons@1.2.81", "", { "dependencies": { "@iconify/types": "2.0.0" } }, "sha512-Utjw4sPtoVdbpAQAkC4O0cYpt4ehQZYr6aFHhmvdeW8mQwkINyAe0ogTPqNptSSKogZ2lfgXM8zpuhO961Wnng=="],
 
-    "@iconify/collections": ["@iconify/collections@1.0.677", "", { "dependencies": { "@iconify/types": "2.0.0" } }, "sha512-Uwbl1p26Md6m2xTMjalJsmQ43YxW+j6RsyrL5RnxRCHEhwympJlaBBCGTKrqI3sA93g9UVJ/Pxi7zDqM3E1oPw=="],
+    "@iconify/collections": ["@iconify/collections@1.0.682", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-kem30jdaPb4xELBhsvxQp60saZQ67TPFDlTJ8nHgvbW4RmBsPYaXgFE37fmQMsQ4S7u5no6VBQQsLPrVdOhQ8w=="],
 
     "@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="],
 
@@ -263,7 +265,7 @@
 
     "@nuxt/fonts": ["@nuxt/fonts@0.14.0", "", { "dependencies": { "@nuxt/devtools-kit": "3.2.4", "@nuxt/kit": "4.4.5", "consola": "3.4.2", "defu": "6.1.7", "fontless": "0.2.1", "h3": "1.15.11", "magic-regexp": "0.10.0", "ofetch": "1.5.1", "pathe": "2.0.3", "sirv": "3.0.2", "tinyglobby": "0.2.16", "ufo": "1.6.4", "unifont": "0.7.4", "unplugin": "3.0.0", "unstorage": "1.17.5" } }, "sha512-4uXQl9fa5F4ibdgU8zomoOcyMdnwgdem+Pi8JEqeDYI5yPR32Kam6HnuRr47dTb97CstaepAvXPWQUUHMtjsFQ=="],
 
-    "@nuxt/icon": ["@nuxt/icon@2.2.1", "", { "dependencies": { "@iconify/collections": "1.0.677", "@iconify/types": "2.0.0", "@iconify/utils": "3.1.1", "@iconify/vue": "5.0.0", "@nuxt/devtools-kit": "3.2.4", "@nuxt/kit": "4.4.5", "consola": "3.4.2", "local-pkg": "1.1.2", "mlly": "1.8.2", "ohash": "2.0.11", "pathe": "2.0.3", "picomatch": "4.0.4", "std-env": "3.10.0", "tinyglobby": "0.2.16" } }, "sha512-GI840yYGuvHI0BGDQ63d6rAxGzG96jQcWrnaWIQKlyQo/7sx9PjXkSHckXUXyX1MCr9zY6U25Td6OatfY6Hklw=="],
+    "@nuxt/icon": ["@nuxt/icon@2.2.2", "", { "dependencies": { "@iconify/collections": "^1.0.679", "@iconify/types": "^2.0.0", "@iconify/utils": "^3.1.1", "@iconify/vue": "^5.0.0", "@nuxt/devtools-kit": "^3.2.4", "@nuxt/kit": "^4.4.4", "consola": "^3.4.2", "local-pkg": "^1.1.2", "mlly": "^1.8.2", "ohash": "^2.0.11", "pathe": "^2.0.3", "picomatch": "^4.0.4", "std-env": "^4.1.0", "tinyglobby": "^0.2.16" } }, "sha512-K9wINW21M9x5GcKF5JEXzPKAT/Kfxl/vdnEyppw54hh5qoLcdi5HmsYoTfDP9gbJ6Z1T6IdH5JxBWk72HMe1Zg=="],
 
     "@nuxt/kit": ["@nuxt/kit@4.4.5", "", { "dependencies": { "c12": "3.3.4", "consola": "3.4.2", "defu": "6.1.7", "destr": "2.0.5", "errx": "0.1.0", "exsolve": "1.0.8", "ignore": "7.0.5", "jiti": "2.6.1", "klona": "2.0.6", "mlly": "1.8.2", "ohash": "2.0.11", "pathe": "2.0.3", "pkg-types": "2.3.1", "rc9": "3.0.1", "scule": "1.3.0", "semver": "7.7.4", "tinyglobby": "0.2.16", "ufo": "1.6.4", "unctx": "2.5.0", "untyped": "2.0.0" } }, "sha512-J0BpoOomzd3iVZozYlZJ7AwAVliXRgeChZnAkQLfg8d0h/Q+aMK9kkHuhwFULASaRn5idiD4BIhOUz7/uoLbSw=="],
 
@@ -443,6 +445,8 @@
 
     "@poppinss/exception": ["@poppinss/exception@1.2.3", "", {}, "sha512-dCED+QRChTVatE9ibtoaxc+WkdzOSjYTKi/+uacHWIsfodVfpsueo3+DKpgU5Px8qXjgmXkSvhXvSCz3fnP9lw=="],
 
+    "@primer/octicons": ["@primer/octicons@19.25.0", "", { "dependencies": { "object-assign": "^4.1.1" } }, "sha512-E0eMV8nXexrs7Vro7PdS8v/JfvvYCMh8HN6CXJ9l8fk9atZaY05fVUcyiAh5KjEJu7IxdFy4URfHGpM7+iOl1A=="],
+
     "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.13", "", {}, "sha512-3ngTAv6F/Py35BsYbeeLeecvhMKdsKm4AoOETVhAA+Qc8nrA2I0kF7oa93mE9qnIurngOSpMnQ0x2nQY2FPviA=="],
 
     "@rollup/plugin-alias": ["@rollup/plugin-alias@6.0.0", "", { "optionalDependencies": { "rollup": "4.60.2" } }, "sha512-tPCzJOtS7uuVZd+xPhoy5W4vThe6KWXNmsFCNktaAh5RTqcLiSfT4huPQIXkgJ6YCOjJHvecOAzQxLFhPxKr+g=="],
@@ -1419,6 +1423,8 @@
 
     "nypm": ["nypm@0.6.6", "", { "dependencies": { "citty": "0.2.2", "pathe": "2.0.3", "tinyexec": "1.1.1" }, "bin": { "nypm": "dist/cli.mjs" } }, "sha512-vRyr0r4cbBapw07Xw8xrj9Teq3o7MUD35rSaTcanDbW+aK2XHDgJFiU6ZTj2GBw7Q12ysdsyFss+Vdz4hQ0Y6Q=="],
 
+    "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
+
     "object-deep-merge": ["object-deep-merge@2.0.0", "", {}, "sha512-3DC3UMpeffLTHiuXSy/UG4NOIYTLlY9u3V82+djSCLYClWobZiS4ivYzpIUWrRY/nfsJ8cWsKyG3QfyLePmhvg=="],
 
     "obug": ["obug@2.1.1", "", {}, "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ=="],
@@ -1923,14 +1929,14 @@
 
     "@nuxt/devtools/which": ["which@6.0.1", "", { "dependencies": { "isexe": "4.0.0" }, "bin": { "node-which": "bin/which.js" } }, "sha512-oGLe46MIrCRqX7ytPUf66EAYvdeMIZYn3WaocqqKZAxrBpkqHfL/qvTyJ/bTk5+AqHCjXmrv3CEWgy368zhRUg=="],
 
-    "@nuxt/icon/std-env": ["std-env@3.10.0", "", {}, "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg=="],
-
     "@nuxt/kit/ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],
 
     "@nuxt/nitro-server/escape-string-regexp": ["escape-string-regexp@5.0.0", "", {}, "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw=="],
 
     "@nuxt/telemetry/ofetch": ["ofetch@2.0.0-alpha.3", "", {}, "sha512-zpYTCs2byOuft65vI3z43Dd6iSdFbOZZLb9/d21aCpx2rGastVU9dOCv0lu4ykc1Ur1anAYjDi3SUvR0vq50JA=="],
 
+    "@nuxt/ui/@nuxt/icon": ["@nuxt/icon@2.2.1", "", { "dependencies": { "@iconify/collections": "1.0.677", "@iconify/types": "2.0.0", "@iconify/utils": "3.1.1", "@iconify/vue": "5.0.0", "@nuxt/devtools-kit": "3.2.4", "@nuxt/kit": "4.4.5", "consola": "3.4.2", "local-pkg": "1.1.2", "mlly": "1.8.2", "ohash": "2.0.11", "pathe": "2.0.3", "picomatch": "4.0.4", "std-env": "3.10.0", "tinyglobby": "0.2.16" } }, "sha512-GI840yYGuvHI0BGDQ63d6rAxGzG96jQcWrnaWIQKlyQo/7sx9PjXkSHckXUXyX1MCr9zY6U25Td6OatfY6Hklw=="],
+
     "@nuxt/vite-builder/escape-string-regexp": ["escape-string-regexp@5.0.0", "", {}, "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw=="],
 
     "@nuxtjs/color-mode/@nuxt/kit": ["@nuxt/kit@3.21.2", "", { "dependencies": { "c12": "3.3.4", "consola": "3.4.2", "defu": "6.1.7", "destr": "2.0.5", "errx": "0.1.0", "exsolve": "1.0.8", "ignore": "7.0.5", "jiti": "2.6.1", "klona": "2.0.6", "knitwork": "1.3.0", "mlly": "1.8.2", "ohash": "2.0.11", "pathe": "2.0.3", "pkg-types": "2.3.1", "rc9": "3.0.1", "scule": "1.3.0", "semver": "7.7.4", "tinyglobby": "0.2.16", "ufo": "1.6.4", "unctx": "2.5.0", "untyped": "2.0.0" } }, "sha512-Bd6m6mrDrqpBEbX+g0rc66/ALd1sxlgdx5nfK9MAYO0yKLTOSK7McSYz1KcOYn3LQFCXOWfvXwaqih/b+REI1g=="],
@@ -2081,6 +2087,10 @@
 
     "@nuxt/devtools/which/isexe": ["isexe@4.0.0", "", {}, "sha512-FFUtZMpoZ8RqHS3XeXEmHWLA4thH+ZxCv2lOiPIn1Xc7CxrqhWzNSDzD+/chS/zbYezmiwWLdQC09JdQKmthOw=="],
 
+    "@nuxt/ui/@nuxt/icon/@iconify/collections": ["@iconify/collections@1.0.677", "", { "dependencies": { "@iconify/types": "2.0.0" } }, "sha512-Uwbl1p26Md6m2xTMjalJsmQ43YxW+j6RsyrL5RnxRCHEhwympJlaBBCGTKrqI3sA93g9UVJ/Pxi7zDqM3E1oPw=="],
+
+    "@nuxt/ui/@nuxt/icon/std-env": ["std-env@3.10.0", "", {}, "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg=="],
+
     "@nuxtjs/color-mode/@nuxt/kit/ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],
 
     "@nuxtjs/color-mode/@nuxt/kit/pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d11ba73..e9a9222 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,7 +2,8 @@
 export default defineNuxtConfig({
   modules: [
     '@nuxt/eslint',
-    '@nuxt/ui'
+    '@nuxt/ui',
+    '@nuxt/icon'
   ],
 
   devtools: {
diff --git a/package.json b/package.json
index d60b147..0a684dd 100644
--- a/package.json
+++ b/package.json
@@ -14,12 +14,14 @@
     "@iconify-json/lucide": "^1.2.106",
     "@iconify-json/simple-icons": "^1.2.81",
     "@nuxt/ui": "^4.7.1",
+    "@primer/octicons": "^19.25.0",
     "nuxt": "^4.4.5",
     "tailwindcss": "^4.3.0"
   },
   "devDependencies": {
     "@iconify-json/octicon": "^1.2.23",
     "@nuxt/eslint": "^1.15.2",
+    "@nuxt/icon": "^2.2.2",
     "eslint": "^10.3.0",
     "typescript": "^6.0.3",
     "vue-tsc": "^3.2.8"
diff --git a/public/search-24.svg b/public/search-24.svg
deleted file mode 100644
index 2b7dbc6..0000000
--- a/public/search-24.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M10.25 2a8.25 8.25 0 0 1 6.34 13.53l5.69 5.69a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-5.69-5.69A8.25 8.25 0 1 1 10.25 2ZM3.5 10.25a6.75 6.75 0 1 0 13.5 0 6.75 6.75 0 0 0-13.5 0Z"></path></svg>
\ No newline at end of file