Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: #307, #295, #298, #294 and add option to change component name #326

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix: #307, #295, #298, #294 and add option to change component name #326

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 29 additions & 14 deletions src/module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@ export interface ModuleOptions {
output: string
iconsPath: string
defaultSprite: string
elementClass: string
spriteClassPrefix: string
componentName: string
optimizeOptions: SVGOConfig
}

Expand All @@ -38,6 +41,9 @@ export default defineNuxtModule<ModuleOptions>({
output: '~/assets/sprite/gen',
defaultSprite: 'icons',
iconsPath: '/_icons',
elementClass: 'icon',
componentName: 'SvgIcon',
spriteClassPrefix: 'sprite-',
optimizeOptions: {
plugins: [
{
Expand Down Expand Up @@ -75,7 +81,12 @@ export default defineNuxtModule<ModuleOptions>({

const logger = useLogger('svg-sprite')

await addComponent({ name: 'SvgIcon', filePath: resolve('./runtime/components/svg-icon.vue'), global: true })
await addComponent({
name: `${options.componentName}`,
filePath: resolve('./runtime/components/svg-icon.vue'),
global: true
})

if (nuxt.options.dev) {
nuxt.options.runtimeConfig.svgSprite = { inputDir, defaultSprite: options.defaultSprite }
addServerHandler({ route: '/api/svg-sprite/generate', handler: resolve('./runtime/server/generate') })
Expand All @@ -88,6 +99,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,
Expand All @@ -103,17 +128,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({
Expand All @@ -128,8 +142,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`)) {
Expand Down
4 changes: 2 additions & 2 deletions src/template.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
}
Expand Down