diff --git a/package.json b/package.json index 8cd06e60..885ff137 100644 --- a/package.json +++ b/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": "pnpm@8.1.0", diff --git a/src/module.ts b/src/module.ts index f3b1eac7..997a5161 100644 --- a/src/module.ts +++ b/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({ output: '~/assets/sprite/gen', defaultSprite: 'icons', iconsPath: '/_icons', + elementClass: 'icon', + spriteClassPrefix: 'sprite-', optimizeOptions: { plugins: [ { @@ -88,6 +92,20 @@ export default defineNuxtModule({ 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({ 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({ } 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`)) { diff --git a/src/runtime/composables/useSprite.ts b/src/runtime/composables/useSprite.ts index 1bb1bfea..9bc77c4c 100644 --- a/src/runtime/composables/useSprite.ts +++ b/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$/, '') diff --git a/src/template.ts b/src/template.ts index b299a8a2..8b94bc9d 100644 --- a/src/template.ts +++ b/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') }