Idea: Callable script to load icon packs or dynamic icons
Tc-001 opened this issue · comments
If you have a ./src/icons/foo.ts file that default-exports function get(name: string): string which returns a raw svg string for a given icon name, you can call said function with <Icon name="foo::some-icon" />.
This way a user can use icon packs like bootstrap-icons without having to either have 15k files or manually copy over new ones any time they need one.
It could also be used to generate procedural/dynamic/random icons like user avatars. (ex. the dicebear avatars package returns an svg string)
One drawback may be that (I believe) there is no way to do spritesheets with this approach, as the component can't tell what svgs will get used to load them in. But it may be possible to have <Spritesheet pack="foo" icons={["some-icon-1", ...]} /> if someone really wants to use it.
(I am open to try and implement it myself, looks like I should just use a different import @ https://github.com/natemoo-re/astro-icon/blob/main/packages/core/lib/utils.ts if :: is detected)
Love this idea. I was thinking about a pack prop that could grab SVGs from dependencies, but this might be an even cleaner solution! I'll definitely start trying to prototype it!
Take a look at https://github.com/natemoo-re/astro-icon/tree/feat/packs! I'm not sure if there's a way to genericize the loading logic since packages are probably all structured differently.
I'm not sure if there's a way to genericize the loading logic since packages are probably all structured differently.
That is why I did the script part. That way the developer can add a translation/adapter layer between astro-icon and the pack of their choice.
Will try and get a draft PR out today hopefully
Going to close this one out, about to ship support for this!
Also added built-in support for the most popular icon packs via Iconify because why not!