Setting innerHTML is slow

[aminya]

I am using solid-icons with Solid-start. However, I have noticed that innerHTML is set on the client side using JavaScript. This is slow when many icons are used on a website based on the real-world profiling I have done.

https://github.com/x64Bits/solid-icons/blob/8805c0198e68872903f01587ce66143853b513b7/src/lib/index.tsx#LL38C7-L38C16

One suggestion would be to import the string of the SVG file and use it as the src attribute for the img tag. Vite and some other build tools are very smart for inlining these strings during compile-time.

Are there any other ways to improve this?

[aminya]

I have fixed this in my fork @aminya/solid-icons. I can upstream the changes once the other PRs are merged
https://github.com/aminya/solid-icons/

[nathanbabcock]

One suggestion would be to import the string of the SVG file and use it as the src attribute for the img tag.

Using icons like this would lose the ability to dynamically recolor with CSS, for example on the theme color toggle shown in the demo app where it inherits fill="currentColor".

I wanted to double check that your PR doesn't eliminate this functionality since it's an important feature I rely on. But I am assuming it is provided in a way that allows for either usage, both <img src="..."> and as an inline <svg> element while also improving performance & reducing build time.