3 ms·
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
by afavour 3y ago
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.
- 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.