Can't use svg icons from nuxt layer

[szulcus]

I want to share common icons between projects using nuxt layers. I would prefer to keep my icons in svg files. Unfortunately, the nuxt-icons module does not meet my expectations (import all icons), so I decided to use your solution.

When I hold the icon in /components/global everything works great. Unfortunately, when I keep this icon in a nuxt layer, I get a string with the name instead of the icon.

I would also love to be able to use param-case in the name property.

Reproduction: https://stackblitz.com/edit/github-qddkmm?file=base/nuxt.config.ts

[szulcus]

Edit:

The problem disappears if I mark all my components as global. Is it possible to mark only one folder as global components? If you think it's not a problem with the module, you can close the issue.

So far, I've created a separate layer for icons, and a custom component that converts the component name to param-case.

[letoast]

Try adding this in you layer's nuxt.config.ts

export default defineNuxtConfig({
    components: [
        // Add this to make global icons work https://nuxt.com/modules/icon#vue-component
        { path: resolve('./components/global'), prefix: '', global: true },
    ],
})