Hacker News Reader

Comment by montroser | Hacker News Reader

Just include an SVG sprite in the HTML page. Then, like the article says, you can reference each icon with <use href="#icon-name" /> and they will be available far before your js bundle is parsed.

View on HN

You could also just use data URIs in your CSS.

“How else could you possibly have SVGs render inline other than to include a massively bloated JS representation of a string in your bundle?”

- the React ecosystem, 2023

The answer, as you’ve shown, is “use the platform”. Sometimes I feel like React actively works against that.

[Edited per below comment pointing out my mistake about external CSS loading order] -- this is a decent alternative, thanks!

External css files are render blocking, meaning any content after a <link rel=stylesheet> will not be visible until the css has been loaded.

I have this idea that as you go up a level of stack parts of the underlying stack get underused, people want to use things at the same level in the stack - for example if you are using React or Vue have everything React or Vue. This makes things work worse because of course you have those underlying levels for a reason, but it makes people feel architecturally purer or something (it is at this point the idea breaks down for me, I have no idea why it is that everything should be in whatever framework you are using, just that this seems to how everyone I ever work with feels on the matter)

I agree, I also think React is a particularly regular victim because of JSX. A JSXed SVG looks just the same as a regular SVG in your editor, if everyone was forced to see the endless chains of React.createElement() they might start to feel uneasy.

Using SVG sprites gives benefit of caching, as icons tend to change less frequently than main application code. And be very careful to use real SVG, not bitmaps wrapped in SVG, as it will very quickly bloat your sprite size.

Are there any negative impacts to accessibility with the `<use href="#icon-name" />` sprite approach?

Reply on news.ycombinator.com