Creating alias for icons in runtime in a nuxt module

[steep bolt]

Hi @lucid grail. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To create an alias for icons in a Nuxt module at runtime, you can use the addVitePlugin and resolveAlias functions from the Nuxt Kit. Here's how you can achieve this:

1. First, you'll need to use addVitePlugin to add a Vite plugin that handles SVG imports. The Nuxt documentation (https://nuxt.com/docs/api/kit/builder#examples-3) provides an example of how to do this with the vite-plugin-svg4vue plugin:

import { defineNuxtModule, addVitePlugin } from '@nuxt/kit'
import { svg4VuePlugin } from 'vite-plugin-svg4vue'

export default defineNuxtModule({
  meta: {
    name: 'nuxt-svg-icons',
    configKey: 'nuxtSvgIcons',
  },
  defaults: {
    svg4vue: {
      assetsDirName: 'src/runtime/assets/icons',
    },
  },
  setup(options) {
    addVitePlugin(svg4VuePlugin(options.svg4vue))
  },
})

2. To create an alias, you can use the resolveAlias function from the Nuxt Kit. You can add this to your module's setup function:

import { defineNuxtModule, addVitePlugin, resolveAlias } from '@nuxt/kit'
import { fileURLToPath } from 'url'

export default defineNuxtModule({
  // ... other module code ...
  setup(options, nuxt) {
    // Add Vite plugin
    addVitePlugin(svg4VuePlugin(options.svg4vue))

    // Add alias
    nuxt.options.alias['#icons'] = fileURLToPath(new URL('./runtime/assets/icons', import.meta.url))
  },
})

This will create an alias #icons that points to your icons directory.

3. To ensure TypeScript recognizes this alias, you should also extend the TypeScript configuration in your module:

import { defineNuxtModule, addVitePlugin, resolveAlias, extendViteConfig } from '@nuxt/kit'
import { fileURLToPath } from 'url'

export default defineNuxtModule({
  // ... other module code ...
  setup(options, nuxt) {
    // Add Vite plugin
    addVitePlugin(svg4VuePlugin(options.svg4vue))

// Add alias
const iconsPath = fileURLToPath(new URL('./runtime/assets/icons', import.meta.url))
nuxt.options.alias['#icons'] = iconsPath

// Extend Vite config for TypeScript
extendViteConfig((config) => {
  config.resolve.alias = {
    ...config.resolve.alias,
    '#icons': iconsPath
  }
})

},
})

With these changes, you should be able to import your icons using the `#icons` alias in your Nuxt application, both with auto-imports and manual imports.

Please note that the exact implementation might vary depending on your specific setup and requirements. You may need to adjust paths and configurations according to your project structure.

**Nuxt Kit Builder documentation** (<https://nuxt.com/docs/api/kit/builder#examples-3>)
**Nuxt Configuration Alias documentation** (<https://nuxt.com/docs/api/nuxt-config#alias>)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------