unplugin-icons
unplugin-icons copied to clipboard
feat: generate svg sprite from used icons
just something that popped into my head a minute ago
- collect all referenced icons into one svg sprite with ids for each (maybe one sprite per collection to avoid id clashes or prefixed-ids)
- instead of the real icon svg return a wrapper that references the id with
xlink:href
would save some for icons that are used repeatedly
I'm not sure it would actually save bytes, since you import the same component for each icon.
This is not only about transferred bytes but also about rendering on the client. There is a tradeoff to be made between inlining the same svg multiple times or just having multiple references to the same item in a sprite. Also the svg sprite would be an asset, whereas generated components are weighing in on js bundle size.
This is not a slam dunk improvement for every situation, but it could be useful in some.
If it's not inline, don't you lose the ability to style the svg with css? I haven't done this with href
before though (it seems xlink:href
is deprecated).
I know that with <use xlink:href="...">
you can style the SVG with CSS. Not sure about href
though.