Replaced IconComponent component by fork of NuxtIcon with types

.eslintrc.json

@@ -87,6 +87,7 @@
     ]
   },
   "settings": {
+    "import/core-modules": ["#app"],
     "vue-i18n": {
       "localeDir": "./src/locales/*.{json,json5,yaml,yml}"
     }

components/DropdownMenu.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
+import { NuxtIconName } from "#app";
 import { RoutesNamedLocations } from "~/.nuxt/typed-router/__routes";
 
 export interface DropdownMenuItem {
   text: string;
-  icon?: string;
+  icon?: NuxtIconName;
   link?: RoutesNamedLocations;
   clickFunction?: Function;
 }
@@ -60,7 +61,7 @@ function menuItemListeners(item: DropdownMenuItem) {
           class="flex items-center justify-start gap-2 px-3 py-2"
           v-on="menuItemListeners(item)"
         >
-          <IconComponent v-if="item.icon" :name="item.icon" />
+          <NuxtIcon v-if="item.icon" :name="item.icon" />
           <span>{{ item.text }}</span>
         </component>
       </li>

components/MediaPlayer.vue

@@ -42,15 +42,15 @@ const { currentTrack } = inject(MediaPlaylistInjectionKey)!;
       <div class="group select-none">
         <button v-if="status === MediaPlayerStatus.Playing" @click="pause()">
           <span class="flex aspect-square w-12 justify-center align-middle">
-            <IconComponent
+            <NuxtIcon
               name="icon.pause.large"
               class="text-3xl group-hover:text-4xl"
             />
           </span>
         </button>
         <button v-if="status !== MediaPlayerStatus.Playing" @click="play()">
           <span class="flex aspect-square w-12 justify-center align-middle">
-            <IconComponent name="play" class="text-3xl group-hover:text-4xl" />
+            <NuxtIcon name="play" class="text-3xl group-hover:text-4xl" />
           </span>
         </button>
       </div>

components/sidebar/SidebarElement.vue

@@ -1,12 +1,13 @@
 <script lang="ts" setup>
+import { NuxtIconName } from "#app";
 import { useAuth0 } from "@auth0/auth0-vue";
 import { RoutesNamedLocations } from "~/.nuxt/typed-router/__routes";
 import { version } from "~/package.json";
 
 const links: {
   title: string;
   link: RoutesNamedLocations;
-  icon: string;
+  icon: NuxtIconName;
 }[] = [
   { title: "Home", link: { name: "index" }, icon: "nav.home" },
   { title: "Browse", link: { name: "browse" }, icon: "nav.browse" },

components/sidebar/SidebarItem.vue

@@ -1,18 +1,16 @@
 <script lang="ts" setup>
+import { NuxtIconName } from "#app";
 import { RoutesNamedLocations } from "~/.nuxt/typed-router/__routes";
 
 withDefaults(
   defineProps<{
     type?: "page" | "playlist" | "private-playlist";
     title: string;
     link: RoutesNamedLocations;
-    image?: string;
-    icon?: string;
+    icon: NuxtIconName;
   }>(),
   {
     type: "page",
-    image: "",
-    icon: "",
   }
 );
 </script>
@@ -23,12 +21,7 @@ withDefaults(
     active-class="bg-tint"
     class="group flex gap-2 rounded-xl px-4 py-2"
   >
-    <ProtectedImage
-      v-if="image"
-      :src="image"
-      class="aspect-square h-full rounded bg-background-2"
-    />
-    <IconComponent v-if="icon" :name="icon" class="text-xl" />
+    <NuxtIcon v-if="icon" :name="icon" class="text-xl" />
     <span
       class="transition-transform group-hover:translate-x-2"
       :class="{ 'font-semibold': type == 'page', 'text-lg': type == 'page' }"

components/track/TrackItem.vue

@@ -51,7 +51,7 @@ function secondsToTime(totalSeconds: number | undefined) {
           <div
             class="absolute inset-0 h-full w-full rounded-md bg-black-1 opacity-50"
           ></div>
-          <IconComponent
+          <NuxtIcon
             name="play"
             filled
             class="absolute inset-0 flex items-center justify-center text-2xl text-white-1"
@@ -93,20 +93,20 @@ function secondsToTime(totalSeconds: number | undefined) {
           class="px-2 py-0 opacity-0 hover:opacity-100 focus:opacity-100 group-hover:opacity-100 group-focus:opacity-100"
           :aria-label="t('track.a11y.download')"
         >
-          <IconComponent name="download" filled class="text-2xl" />
+          <NuxtIcon name="download" filled class="text-2xl" />
         </button>
         <button
           class="px-2 py-0 opacity-0 hover:opacity-100 focus:opacity-100 group-hover:opacity-100 group-focus:opacity-100"
           :aria-label="t('track.a11y.queue')"
         >
-          <IconComponent name="queue" filled class="text-2xl" />
+          <NuxtIcon name="queue" filled class="text-2xl" />
         </button>
         <button
           :aria-label="t('track.a11y.options')"
           class="focus:bg-lime-400 rounded-lg px-2 py-0"
           @click="openOptions"
         >
-          <IconComponent name="options" filled class="text-2xl" />
+          <NuxtIcon name="options" filled class="text-2xl" />
         </button>
       </div>
     </div>

modules/icons/generator/index.ts

@@ -0,0 +1,60 @@
+/* eslint-disable import/prefer-default-export */
+/* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Nuxt } from "@nuxt/schema";
+import chalk from "chalk";
+import { saveGeneratedFile } from "./output";
+import { constructIconNames } from "./parser";
+
+type CreateTypedIconsArgs = {
+  nuxt: Nuxt;
+  location: string | null;
+  fileExtension: string;
+  isHookCall?: boolean;
+};
+
+export async function CreateTypedIcons({
+  nuxt,
+  location,
+  fileExtension,
+  isHookCall = false,
+}: CreateTypedIconsArgs): Promise<void> {
+  try {
+    if (!isHookCall) {
+      if (location) {
+        nuxt.hook("builder:watch", (_, watchedPath) => {
+          if (watchedPath.startsWith(location)) {
+            CreateTypedIcons({
+              nuxt,
+              location,
+              fileExtension,
+              isHookCall: true,
+            });
+          }
+        });
+      }
+
+      nuxt.hook("modules:done", () => {
+        CreateTypedIcons({ nuxt, location, fileExtension, isHookCall: true });
+      });
+
+      return;
+    }
+
+    if (location) {
+      const iconNames = await constructIconNames(
+        nuxt.options.rootDir,
+        location,
+        fileExtension
+      );
+      await saveGeneratedFile(nuxt, iconNames);
+    } else {
+      await saveGeneratedFile(nuxt, null);
+    }
+  } catch (e) {
+    console.error(
+      chalk.red("Error while generating icons definition model"),
+      `\n${e}`
+    );
+  }
+}

modules/icons/generator/output.ts

@@ -0,0 +1,27 @@
+/* eslint-disable import/prefer-default-export */
+/* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Nuxt } from "@nuxt/schema";
+import { addTemplate } from "@nuxt/kit";
+
+export const saveGeneratedFile = (_: Nuxt, iconNames: string[] | null) => {
+  addTemplate({
+    filename: "nuxt-icons.d.ts",
+    getContents: () => `// @ts-nocheck
+// eslint-disable
+/** 
+ * ---------------------------------------------------
+ * 🚗 Generated by nuxt-icons. Do not modify !
+ * ---------------------------------------------------
+ * */
+
+declare module '#app' {
+  type NuxtIconName = ${
+    iconNames === null
+      ? "string"
+      : iconNames.map((p) => `"${p.replace(/[\\"]/g, "\\$&")}"`).join(" | ")
+  }
+}
+`,
+  });
+};

modules/icons/generator/parser.ts

@@ -0,0 +1,12 @@
+/* eslint-disable import/prefer-default-export */
+/* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */
+import { glob } from "glob";
+
+export const constructIconNames = async (
+  path: string,
+  location: string,
+  fileExtension: string
+) =>
+  (await glob(`${location}/**/**.${fileExtension}`, { cwd: path }))
+    .map((p) => p.substring(location.length + 1))
+    .map((p) => p.substring(0, p.length - 4));

modules/icons/module.ts

@@ -0,0 +1,52 @@
+// This component is a copy of the nuxt-icon component from nuxt-icons (https://nuxt.com/modules/icons)
+/* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */
+import { defineNuxtModule, createResolver, addComponent } from "@nuxt/kit";
+import { CreateTypedIcons } from "./generator";
+
+export interface ModuleOptions {
+  // dir: string
+  /**
+   * Enables path autocomplete and path validity for programmatic validation
+   *
+   *  @default true
+   */
+  pathCheck?: boolean;
+}
+
+export default defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: "nuxt-icons",
+    configKey: "nuxtIcons",
+    compatibility: {
+      nuxt: "^3.0.0",
+    },
+  },
+  defaults: {
+    pathCheck: true,
+  },
+  setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    addComponent({
+      name: "nuxt-icon",
+      global: true,
+      filePath: resolve("./runtime/components/nuxt-icon.vue"),
+    });
+
+    // Force register of type declaration
+    nuxt.hook("prepare:types", ({ references }) => {
+      references.push({
+        path: resolve(nuxt.options.buildDir, "nuxt-icons.d.ts"),
+      });
+    });
+
+    if (options.pathCheck) {
+      CreateTypedIcons({
+        nuxt,
+        location: "assets/icons",
+        fileExtension: "svg",
+      });
+    } else {
+      CreateTypedIcons({ nuxt, location: null, fileExtension: "" });
+    }
+  },
+});

components/IconComponent.vue → modules/icons/runtime/components/nuxt-icon.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-// This component is a copy of the nuxt-icon component from nuxt-icons (https://nuxt.com/modules/icons)
-// with some modifications to help with Typescript support.
+import { NuxtIconName } from "#app";
 import { ref, watchEffect } from "#imports";
 
 const props = withDefaults(
   defineProps<{
-    name: string;
+    name: NuxtIconName;
     filled?: boolean;
   }>(),
   { filled: false }

nuxt.config.ts

@@ -8,6 +8,7 @@ const modules: NuxtConfig["modules"] = [
   "@nuxt/devtools",
   // Use TS-path as workaround (See https://github.com/nuxt/nuxt/issues/20912)
   "~/modules/figma2tailwind/index.ts", // Must be placed before "@nuxtjs/tailwindcss"
+  "~/modules/icons/module.ts",
   "@nuxtjs/tailwindcss",
   "@nuxtjs/i18n",
   "nuxt-vitest",

package.json

@@ -34,6 +34,7 @@
     "@nuxtjs/tailwindcss": "^6.6.6",
     "@vitest/coverage-c8": "^0.30.1",
     "@vue/test-utils": "^2.3.2",
+    "chalk": "^5.2.0",
     "cypress": "^12.10.0",
     "electron": "^24.1.2",
     "electron-builder": "^23.6.0",
@@ -43,6 +44,7 @@
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-vitest": "^0.2.3",
+    "glob": "^10.2.4",
     "happy-dom": "^9.9.2",
     "log-symbols": "^5.1.0",
     "nuxt": "^3.5.0",