Motivation
Sprites are the most effective way to work with your SVG icons, but for some reason developers (vision from a React world) prefer mostly bloated and ineffective, "compile" SVG to react component with inlined SVG content.
Of course, we can use some external tools like https://svgsprit.es/ or some npm libraries, but that's not serious (if you know any alternatives, let me know, and I'll add links), developers need DX.
In a ridiculous, but incredibly popular way, we don't have other solutions with the same DX.
Just think about it a little, you need to "compile" SVG, to embed your secondary static content in JSX and get a lot of unwanted issues: additional source code, extra build time, extra bundle size, the user's browser will parse and evaluate your static SVG as JS code, you can never cache it, WOOF, etc., etc.
Developers continue to use inefficient solutions with good user experiences, even though they may be more difficult to maintain, because they are better than super-efficient, yet unusable setups with semi-manual generators.
That's why we're here! 🥳
Additional references
- https://kurtextrem.de/posts/svg-in-js: Great article about problems of SVG in JS
- https://github.com/DavidWells/icon-pipeline: Simple solution for inlined sprites