Ok, I want to add a pencil icon here, the pencil should be #ccc, here is #ddd, there is rebeccapurple, and over here it should be the same color as the container color.
Please write a nodejs server that produces those tiny images, don't forgot to correctly set the caching headers...
Yeah, this is what I was referring to and is my main use for embedding SVGs.
For really simple ones, the size of the icon isn't a whole lot bigger than a CDN/object storage URL. And if you reuse it a couple times, it might even be a net bandwidth reduction.
Honestly, when people are making use of CSS to "reach into" the svg dynamically, or like your example, to color it dynamically, I'm not opposed to the strategy.
99% of the inline <svg> usages I see are people using js includes to inline an SVG which is itself stored in a .jsx file. This is just as lazy and wasteful as it would be if Styled Components were built not to generate classnames and a single stylesheet, but instead with all the rules simply inlined in style attributes on every element.
And the oft overlooked synergy with aria work is test automation. Code that is hard to screen read is often also difficult to integration or E2E test accurately.
Please write a nodejs server that produces those tiny images, don't forgot to correctly set the caching headers...