Yeah, I've seen React pages where a tiny icon (like a little star) is inlined a hundred times on the same page. That's a lot of extra bytes :(
At least if they're in the same JSX component, the server can gzip that SVG string so it's not as big over the wire. But if the same icon gets used in different pages, the costs multiply.
It's nice to have the OPTION of treating SVG as code when you want it to be code, but otherwise, it's better for the user to treat it as a graphic and let the usual caching mechanisms (server+browser) do their jobs.
At least if they're in the same JSX component, the server can gzip that SVG string so it's not as big over the wire. But if the same icon gets used in different pages, the costs multiply.
It's nice to have the OPTION of treating SVG as code when you want it to be code, but otherwise, it's better for the user to treat it as a graphic and let the usual caching mechanisms (server+browser) do their jobs.