Fix for input and output values that include nuxt aliases

package.json

@@ -1,6 +1,6 @@
 {
-    "name": "@nuxtjs/svg-sprite",
-    "version": "1.0.0",
+    "name": "@gvade/nuxt3-svg-sprite",
+    "version": "1.0.2",
     "description": "Easy way to use and optimize svg files in Nuxt.js",
     "repository": "nuxt-community/svg-sprite-module",
     "license": "MIT",
@@ -29,18 +29,18 @@
         "test": "vitest run"
     },
     "dependencies": {
-        "@nuxt/kit": "^3.3.2",
-        "svgo": "^3.0.2"
+        "@nuxt/kit": "^3.10.0",
+        "svgo": "^3.2.0"
     },
     "devDependencies": {
         "@nuxt/module-builder": "^0.2.1",
         "@nuxt/test-utils": "latest",
         "@nuxtjs/eslint-config-typescript": "latest",
         "@types/svgo": "^2.6.4",
-        "eslint": "^8.37.0",
-        "nuxt": "^3.3.2",
-        "playwright": "^1.32.1",
-        "release-it": "^15.9.3",
+        "eslint": "^8.56.0",
+        "nuxt": "^3.10.0",
+        "playwright": "^1.41.2",
+        "release-it": "^15.11.0",
         "vitest": "^0.29.8"
     },
     "packageManager": "[email protected]",

src/module.ts

@@ -22,6 +22,8 @@ export interface ModuleOptions {
   output: string
   iconsPath: string
   defaultSprite: string
+  elementClass: string
+  spriteClassPrefix: string
   optimizeOptions: SVGOConfig
 }
 
@@ -38,6 +40,8 @@ export default defineNuxtModule<ModuleOptions>({
     output: '~/assets/sprite/gen',
     defaultSprite: 'icons',
     iconsPath: '/_icons',
+    elementClass: 'icon',
+    spriteClassPrefix: 'sprite-',
     optimizeOptions: {
       plugins: [
         {
@@ -88,6 +92,20 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.options.alias['#svg-sprite'] = addTemplate({
       ...spritesTemplate,
       write: true,
+      options: {
+        sprites,
+        outDir,
+        defaultSprite: options.defaultSprite,
+        elementClass: options.elementClass,
+        spriteClassPrefix: options.spriteClassPrefix
+      }
+    }).dst
+
+    // Add template
+    // Fix: we need this alias in the svg-icon component independently on the iconsPath setting
+    nuxt.options.alias['#svg-sprite-icons'] = addTemplate({
+      ...iconsTemplate,
+      write: true,
       options: {
         sprites,
         outDir,
@@ -103,17 +121,6 @@ export default defineNuxtModule<ModuleOptions>({
         src: resolve('./runtime/components/layout.vue')
       })
 
-      // Add template
-      nuxt.options.alias['#svg-sprite-icons'] = addTemplate({
-        ...iconsTemplate,
-        write: true,
-        options: {
-          sprites,
-          outDir,
-          defaultSprite: options.defaultSprite
-        }
-      }).dst
-
       // Register route
       nuxt.hook('pages:extend', (routes) => {
         routes.unshift({
@@ -128,8 +135,9 @@ export default defineNuxtModule<ModuleOptions>({
     }
 
     nuxt.hook('nitro:init', async (nitro) => {
-      const input = options.input.replace(/~|\.\//, 'root').replace(/\//g, ':')
-      const output = options.output.replace(/~\/|\.\//, '')
+      // Support (fix) for default and custom nuxt aliases
+      const input = inputDir.replace(nitro.options.rootDir, '~').replace(/~|\.\//, 'root').replace(/\//g, ':');
+      const output = outDir.replace(nitro.options.rootDir, '').replace(/~\/|\.\//, '');
 
       // Make sure output directory exists and contains .gitignore to ignore sprite files
       if (!await nitro.storage.hasItem(`${output}:.gitignore`)) {

src/runtime/composables/useSprite.ts

@@ -1,7 +1,7 @@
 // @ts-ignore
-import { sprites, defaultSprite, spriteClass, spriteClassPrefix } from '#svg-sprite'
+import {sprites, defaultSprite, spriteClass, spriteClassPrefix} from '#svg-sprite'
 
-function generateName (name: string) {
+function generateName(name: string) {
   return name
     .toLowerCase()
     .replace(/\.svg$/, '')

src/template.ts

@@ -8,8 +8,8 @@ export const spritesTemplate = {
       'export const sprites = {',
       imports,
       '}',
-      'export const spriteClass = "";\n',
-      'export const spriteClassPrefix = "";\n',
+      `export const spriteClass = "${options.elementClass}";\n`,
+      `export const spriteClassPrefix = "${options.spriteClassPrefix}";\n`,
       `export const defaultSprite = "${options.defaultSprite}";\n`
     ].join('\n')
   }