search

x64Bits / solid-icons

The simplest way to use icons in SolidJS
https://solid-icons.vercel.app
MIT License
284 stars 18 forks source link

Setting `innerHTML` is slow #25

Open aminya opened 1 year ago

aminya commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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.