4 ms·
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 immedi
by davnicwil 3y ago
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?
- akdor1154 3y agoBy 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.
- davnicwil 3y agoI'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.
- montroser 3y agoJust 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.
- afavour 3y agoYou 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.
- davnicwil 3y ago[Edited per below comment pointing out my mistake about external CSS loading order] -- this is a decent alternative, thanks!
- jacobr 3y agoExternal css files are render blocking, meaning any content after a <link rel=stylesheet> will not be visible until the css has been loaded.
- deleted 3y ago[deleted]
- bryanrasmussen 3y agoI 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)
- afavour 3y agoI 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.
- butz 3y agoUsing 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.
- deleted 3y ago[deleted]
- c_s_guy 3y agoAre there any negative impacts to accessibility with the `<use href="#icon-name" />` sprite approach?
- dreamcompiler 3y agoThis 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."