fix: remove vite-svg-loader

app.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import ScrollPanel from "primevue/scrollpanel";
-import SparkIcon from "~/assets/icons/spark.svg";
+import type { ComponentPublicInstance } from "vue";
 
 const path = computed(() => {
   return useRoute().path;
 });
 const sProgress = ref(path.value === "/" ? 1 : 0);
-const scrollPanel =
+const scrollPanel = useTemplateRef<ComponentPublicInstance>("scrollPanel");
-  useTemplateRef<InstanceType<typeof ScrollPanel>>("scrollPanel");
 const sX = ref(0);
 const sY = ref(0);
 const sWidth = ref(0);
@@ -15,28 +14,27 @@ const sHeight = ref(0);
 const mounted = ref(false);
 
 const handleScrollOrResize = () => {
+  const navEl = document.querySelector("header nav");
+  const el = document.querySelector("header .active");
+  if (el && navEl) {
+    sX.value = el.getBoundingClientRect().x - navEl.getBoundingClientRect().x;
+    sY.value = el.getBoundingClientRect().y - navEl.getBoundingClientRect().y;
+    sWidth.value = el.getBoundingClientRect().width;
+    sHeight.value = el.getBoundingClientRect().height;
+  }
   if (path.value !== "/") {
     sProgress.value = 0;
     return;
   }
-  const scrollTop = scrollPanel.value?.lastScrollTop;
+  const scrollTop = (scrollPanel.value as unknown as { lastScrollTop: number })
+    .lastScrollTop;
   const clientHeight = scrollPanel.value?.$el.clientHeight;
   sProgress.value = 1 - Math.min(scrollTop / clientHeight, 1);
 };
 
 onMounted(() => {
+  addEventListener("resize", handleScrollOrResize);
   watchEffect(handleScrollOrResize);
-  watchEffect(() => {
-    console.log("path changed", path.value);
-    const navEl = document.querySelector("header nav");
-    const el = document.querySelector("header .active");
-    if (el && navEl) {
-      sX.value = el.getBoundingClientRect().x - navEl.getBoundingClientRect().x;
-      sY.value = el.getBoundingClientRect().y - navEl.getBoundingClientRect().y;
-      sWidth.value = el.getBoundingClientRect().width;
-      sHeight.value = el.getBoundingClientRect().height;
-    }
-  });
   nextTick(() => {
     mounted.value = true;
   });
@@ -60,7 +58,11 @@ onMounted(() => {
         }"
       >
         <NuxtLink to="/" class="flex items-center">
-          <SparkIcon class="w-10 h-10 mr-2 fill-(--p-primary-color)" />
+          <Icon
+            name="s:spark"
+            class="text-4xl mr-2 fill-(--p-primary-color)"
+            mode="svg"
+          />
           <h1>SPARK</h1>
         </NuxtLink>
         <div class="grow" />

nuxt.config.ts

@@ -1,8 +1,6 @@
 import { definePreset } from "@primeuix/themes";
 import Aura from "@primeuix/themes/aura";
-import { colorScheme } from "@primeuix/themes/aura/autocomplete";
 import tailwindcss from "@tailwindcss/vite";
-import svgLoader from "vite-svg-loader";
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -15,9 +13,17 @@ export default defineNuxtConfig({
     "@primevue/nuxt-module",
     "@nuxtjs/fontaine",
   ],
+  icon: {
+    customCollections: [
+      {
+        prefix: "s",
+        dir: "./assets/icons",
+      },
+    ],
+  },
   css: ["~/assets/css/main.css"],
   vite: {
-    plugins: [tailwindcss(), svgLoader()],
+    plugins: [tailwindcss()],
     server: {
       allowedHosts: ["6a3f505a.r15.cpolar.top"],
     },

package.json

@@ -30,7 +30,6 @@
     "@primevue/nuxt-module": "^4.3.4",
     "sass": "^1.88.0",
     "typescript": "^5.8.3",
-    "vite-svg-loader": "^5.1.0",
     "vue-tsc": "^2.2.10"
   }
 }

pnpm-lock.yaml

@@ -60,9 +60,6 @@ importers:
       typescript:
         specifier: ^5.8.3
         version: 5.8.3
-      vite-svg-loader:
-        specifier: ^5.1.0
-        version: 5.1.0(vue@3.5.13(typescript@5.8.3))
       vue-tsc:
         specifier: ^2.2.10
         version: 2.2.10(typescript@5.8.3)
@@ -4733,11 +4730,6 @@ packages:
       vite: ^6.0.0
       vue: ^3.5.0
 
-  vite-svg-loader@5.1.0:
-    resolution: {integrity: sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==}
-    peerDependencies:
-      vue: '>=3.2.13'
-
   vite@6.3.5:
     resolution: {integrity: sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
@@ -10388,11 +10380,6 @@ snapshots:
       vite: 6.3.5(@types/node@22.15.17)(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0)(terser@5.39.0)(yaml@2.7.1)
       vue: 3.5.13(typescript@5.8.3)
 
-  vite-svg-loader@5.1.0(vue@3.5.13(typescript@5.8.3)):
-    dependencies:
-      svgo: 3.3.2
-      vue: 3.5.13(typescript@5.8.3)
-
   vite@6.3.5(@types/node@22.15.17)(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0)(terser@5.39.0)(yaml@2.7.1):
     dependencies:
       esbuild: 0.25.4