Hacker News Reader

Comment by afavour | Hacker News Reader

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.

View on HN

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.

[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.

Reply on news.ycombinator.com