Alex RussellThis 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.
Brian LeRoux 💚@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
@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.
Cole Peters@brianleroux @slightlyoff Yeah, my experience building the Enhance landing page just did not have any of these issues, despite the fact that the SVGs were all part of custom elements and included nontrivial animations and included client side interactivity. Genuinely kinda baffled here!