feat: enum of the sprite and its contents

Author: TakNePoidet

docs/content/1.index.md

@@ -62,15 +62,22 @@ export default defineNuxtConfig({
 
 ::code-group
 
-```html [Usage]
+```vue [Usage]
+<script setup>
+import { Love } from '#sprite'
+</script>
+
 <template>
   <div>
     <h2>Default sprite(top level icons)</h2>
     <SvgIcon name="nuxt" />
 
     <h2>Named Sprite</h2>
     <SvgIcon name="love/love" />
-    <SvgIcon name="love/bee-mine" />
+    
+    <h2>Enum Sprite</h2>
+    <SvgIcon :name="Love.HugsAndKisses" />
+    <SvgIcon :name="Love.BeeMine" />
   </div>
 </template>
 ```
@@ -83,6 +90,10 @@ export default defineNuxtConfig({
 ## Named Sprite
 
 :SvgIcon{name="love/love"}
+
+## Enum Sprite
+
+:SvgIcon{name="love/hugs-and-kisses"}
 :SvgIcon{name="love/bee-mine"}
 ::
 ::
@@ -125,4 +136,4 @@ Or locally:
 
 [MIT License](https://github.com/nuxt-community/svg-sprite-module/blob/master/LICENSE)
 
-Copyright (c) Nuxt Community
+Copyright (c) Nuxt Community

playground/pages/index.vue

@@ -9,9 +9,9 @@
       <svg-icon name="dreams/Beautiful_Little_Girl_7881" title="Beautiful Little Girl" width="150px" height="150px" />
     </div>
     <div>
-      <svg-icon name="love/Bee Mine" title="Bee Mine" width="150px" height="150px" />
-      <svg-icon name="love/Hugs And Kisses" title="Hugs And Kisses" width="150px" height="150px" />
-      <svg-icon name="love/Love" title="Love" width="150px" height="150px" />
+      <svg-icon :name="Love.Love" title="Bee Mine" width="150px" height="150px" />
+      <svg-icon :name="Love.HugsAndKisses" title="Hugs And Kisses" width="150px" height="150px" />
+      <svg-icon :name="Love.Love" title="Love" width="150px" height="150px" />
     </div>
     <div class="copyright">
       photos by <a href="https://lovesvg.com" rel="noopener" target="_blank">lovesvg</a>
@@ -20,6 +20,9 @@
 </template>
 
 <script setup lang="ts">
+
+import { Love } from '#sprite'
+
 const aboutNuxt = 'Nuxt.js presets all the configuration needed to make your development of a Vue.js application enjoyable.'
 </script>
 

src/module.ts

@@ -9,11 +9,12 @@ import {
   useLogger,
   addLayout,
   addServerHandler,
-  updateTemplates
+  updateTemplates,
+  addTypeTemplate
 } from '@nuxt/kit'
 import type { Config as SVGOConfig } from 'svgo'
 import inlineDefs from './svgo-plugins/inlineDefs'
-import { iconsTemplate, spritesTemplate } from './template'
+import { iconCollectionDefinitionsTemplate, iconCollectionTemplate, iconsTemplate, spritesTemplate } from './template'
 import { createSpritesManager, useSvgFile } from './utils'
 
 export interface ModuleOptions {
@@ -84,6 +85,7 @@ export default defineNuxtModule<ModuleOptions>({
     }
 
     const { sprites, addSvg, removeSvg, generateSprite } = createSpritesManager(options.optimizeOptions)
+
     nuxt.options.alias['#svg-sprite'] = addTemplate({
       ...spritesTemplate,
       write: true,
@@ -94,6 +96,21 @@ export default defineNuxtModule<ModuleOptions>({
       }
     }).dst
 
+    addTypeTemplate({
+      ...iconCollectionDefinitionsTemplate,
+      write: true,
+      options: {
+        sprites
+      }
+    })
+    nuxt.options.alias['#sprite'] = addTemplate({
+      ...iconCollectionTemplate,
+      write: true,
+      options: {
+        sprites
+      }
+    }).dst
+
     // Register icons page
     if (options.iconsPath) {
       // Add layout

src/template.ts

@@ -1,3 +1,4 @@
+import { pascalCase } from './utils'
 
 export const spritesTemplate = {
   filename: 'svg-sprite.mjs',
@@ -28,3 +29,36 @@ export const iconsTemplate = {
     ].join('\n')
   }
 }
+
+export const iconCollectionTemplate = {
+  filename: 'svg-sprite-icon-collection.mjs',
+  getContents ({ options }: any) {
+    const sprites = Object.entries(options.sprites).map(([name, values]) => {
+      const icons = (values as any[]).map((icon) => {
+        return `\t${pascalCase(icon.name)}: '${name}/${icon.name}',`
+      })
+      return [`export const ${pascalCase(name)} = {`, ...icons, '};\n']
+    })
+    return [
+      '// Generated by @nuxtjs/svg-sprite',
+      ...sprites.flat(2)
+    ].join('\n')
+  }
+}
+export const iconCollectionDefinitionsTemplate = {
+  filename: 'types/svg-sprite-icon-collection.d.ts',
+  getContents ({ options }: any) {
+    const sprites = Object.entries(options.sprites).map(([name, values]) => {
+      const icons = (values as any[]).map((icon) => {
+        return `\t\treadonly ${pascalCase(icon.name)}: '${name}/${icon.name}',`
+      })
+      return [`\texport declare const ${pascalCase(name)}: {`, ...icons, '\t};\n']
+    })
+    return [
+      '// Generated by @nuxtjs/svg-sprite',
+      'declare module \'#sprite\' {',
+      ...sprites.flat(2),
+      '}'
+    ].join('\n')
+  }
+}

src/utils.ts

@@ -103,3 +103,16 @@ async function optimizeSVG (svg: SVG, optimizeOptions: Config = {}) {
     content: $data.data
   }
 }
+
+export function pascalCase (string: string): string {
+  return `${string}`
+    .toLowerCase()
+    .replace(/[-_]+/g, ' ')
+    .replace(/[^\w\s]/g, '')
+    .replace(
+      /\s+(.)(\w*)/g,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      ($1, $2, $3) => `${$2.toUpperCase() + $3}`
+    )
+    .replace(/\w/, s => s.toUpperCase())
+}