Maybe we need to override also options passed to use the css ones instead defaults.

We also need to check if we need to remove some svg attrs when generating before calling the CSS compiler.

I'm changing the default hander to check css compiler, adding the svg xmlns and so we don't need to transform it on the compiler.

EDIT: there is no need to change it.

Seems we need to use base64 since complex svg icons break the style.

We also need to prevent adding twice the svg width and height attrs, css style complains.

On chrome opening in a new tab the svg when width or height are duplicated results on (it is not displayed on the page):

We need also review why some attrs on svg are removed, for example using import '~icons/custom/steering-wheel.css' this attr is removed : style='color: rgb(32, 115, 129);': in next screenshot, the first svg on Custom Icons is blue while on CSS Icons is black.

I don't know if we need the types/css.d.ts.

This looks comprehensive. Nice to see examples in multiple frameworks and documentation.

Thanks for the awesome work! I have thought about this for a while and I think this is a very interesting solution - but maybe this is not the best place for it (you will need to import every icon to use it, which is not optimal). I have been working on a better way to do it for a while and will be out soon. stay turned :)

Here: https://twitter.com/antfu7/status/1452802545118711812

I am closing this for now. Another post about the implementation details of the Pure CSS Icons solution will also come soon.

Thanks for the inspiration and hard work on this! @husayt @userquin 🙌