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

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?

Start with the repository playground and trace how nested SFC names and custom SVG icons are discovered and resolved. Define completion as allowing SVGs in nested folders to load through without requiring a matching Vue SFC for each file.