Configure to bundle icon sets

[antfu]

Provide a configuration to bundle a specified set of icons and load them sync/asynchronously.

Originally posted by @antfu in #7 (comment)

[innocenzi]

Personally, what I am trying to solve is a workflow with which I could provide an icon list (or bundle), and be able to use them dynamically with a component, like the following:

<icon :icon="menu.icon" class="w-4" />

I'm conflicted about where the logic should be. I like @NoelDeMartin's idea about having a directory from which icons are loaded, but that implies a dependency on vite-plugin-components, which I feel should not be necessary.

Assuming the logic would be implemented in vite-plugin-icons only, I can imagine the following configuration:

// some logic to import/generate iconify JSON bundles with only what you need
// https://github.com/antfu/vite-plugin-icons/issues/12#issuecomment-774391679
const collections = [/* ... */]

// in Vite's plugin definitions
Icons({
  component: 'icon',           // would be the default
  directory: './assets/icons', // would be the default
  collections                  // would be empty by default
}),

• The plugin would load all the SVGs in ./assets/icons and add them to a custom collection
• The collections's icons would be merged with the custom collection's icons and the statically-resolved ones
• The plugin would generate a simple icon component which would load an icon from the bundled collections

I'd give this a shot but I'm not familiar with Iconify yet and it doesn't seem to be typed, and I'm not familiar with Vite's plugin API either, so before diving in I wanted to know if you can see a flaw that I'd have missed in this.

[antfu]

Sounds good and feel free to give it a shot!

Do you think it's better to explicitly name it customCollections?

[innocenzi]

Alright, I'll try to work on that if I can find some time. And yes, it's a better name. 👍

EDIT - Not a lot of time to hack around right now, so anyone feel free to try
EDIT 2 - I have moved away from this package in order to use https://github.com/anncwb/vite-plugin-svg-icons as a temporary replacement, 'til I find the time to work on this

[antfu]

Let's continue the discussion in #12.