Hacker News Reader

Comment by davnicwil | Hacker News Reader

While I agree it should be only used where absolutely necessary, another not insignificant benefit to 'inlining' svgs in jsx is that they're then visible immediately on first render, there's no loading time.

This is particularly relevant for icons and buttons in key places in the UI, where it's janky to have them appear even a split second after the rest of the UI.

How can you acheive that using other approaches?

View on HN

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.

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?

By not using jsx? It would be an order of magnitude less waste to just set innerhtml in such a case, than to waste your users' cpu cycles diffing and reconstituting a giant tree of vdom.

I'd also generalise the question beyond jsx to just 'inline with javascript' - ie just as you say, inject the svg markup into the DOM synchronously using the same javascript that renders the DOM (rather than some deferred source) - it's just most of the time for me that means jsx.

This sounds to me like "You should generate images one pixel at a time from javascript, because they will render immediately. Never use those obsolete <img> tags."

Reply on news.ycombinator.com