Feature request: A way to manage custom SVGs that are nested inside folders.

[miclgael]

Hi there, thanks for the cool module.

I was wondering if it is possible to nest custom SVG icons inside folders?

Editing OP to make it more clear:

---

After some experimenting with the playground in the repo I understand the intended pattern now.

1. Default pattern

// Assuming: `components/global/MyIcon.vue`

<Icon name="MyIcon" /> 

2. If you want to have <Icon> load an SFC that is nested in folders - that's easy:

// Assuming: `components/global/CoolStuff/MyIcon.vue`

<Icon name="CoolStuffMyIcon" /> 

3. However, if you have an elaborate set of custom icons (.svg extension) that are organized in folders, you would currently need an individual .vue icon to go along with every single one.

// Assuming: `{public|assets}/icons/brand/MyIcon.svg
// Assuming: `components/global/icons/brand/MyIcon.vue`

// Assuming: `{public|assets}/icons/brand/MyOtherIcon.svg
// Assuming: `components/global/icons/brand/MyOtherIcon.vue`

<Icon name="IconsBrandMyIcon" />
<Icon name="IconsBrandMyOtherIcon" />

// etc.

This means you need to manage a folder of SVGs as well as their matching SFCs.

Is there a solution?

[Atinux]

As you can see on https://github.com/nuxt-modules/icon/blob/2cf77b302b55b97e6975286168281c4339e2e4e7/src/runtime/Icon.vue#L31

We use the component name so might not be possible to do so.

Is brand/MyIcon actually named BrandMyIcon in your project? If so, it could be possible 🤔

[miclgael]

Thanks for the reply!

Taking a look at the code you have posted, I think we’d almost need a “path” prop, to “glue” the path to the component name. I’m just after a way to nicely organise custom SVG icons inside folders.

[ehsanonline]

I use components: ["~/components","~/components/abc"], inside nuxt config, now I can't use svg icons in global folder.

[Atinux]

@ehsanonline you can use the object syntax:

components: [
  {
    path: '~/components/global',
    global: true,
  }
]