feat: generate svg sprite from used icons

[dominikg]

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

[Akryum]

I'm not sure it would actually save bytes, since you import the same component for each icon.

[dominikg]

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.

[IanVS]

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).

[Akryum]

I know that with <use xlink:href="..."> you can style the SVG with CSS. Not sure about href though.