This is a great overview of how to fix the scourge of inline'd SVG in today's web apps:

https://kurtextrem.de/posts/svg-in-js

I will only add that the React overhead of using JSX as a templating system for SVG is dramatic, and not in a good way.

Breaking Up with SVG-in-JS in 2023

Technical deep-dive on why you shouldn't have SVGs in your JS bundle and better techniques for JSX usage.

@slightlyoff 🤔 our experience has been great? The thing to rethink here is when render time is and what primitive we use for encapsulation. Components, real web components, are a great combo in our experience. https://enhance.dev as a non trivial example. Cc @colepeters
Enhance

The HTML first full stack web framework

Enhance
@brianleroux @colepeters The main issue here is the poor scaling factor. Like "CSS-in-JS", the costs poor reasonable in the small, but they get away from you in all sorts of ways (bundle size, compile time, memory use) as you scale.
@slightlyoff @colepeters that's because they're doing this work clientside/ really only need that code if adding interactivity. we don't even bother bundling.
@brianleroux @slightlyoff Lots more notes here including using SVG for accessible type layout, animations, etc, all with custom elements: https://begin.com/blog/posts/2023-04-21-building-the-enhance-landing-page
Above the Clouds With the New Enhance Landing Page — Begin Blog

Join us for a look under the hood of our brand new landing page for Enhance — the biggest project we’ve yet thrown at our very own framework.

Begin