Getting inline SVG out of your browser bundles

In this talk, we look at the current landscape for embedding SVG icons in JS frontends, and especially React components. For the most part, this involves inlining SVG as JS code (also called SVG-in-JS). We analyse the problem space in order to find the issues that inlining solves, and weigh its costs and benefits.

After that, we compare that approach with img[src] and SVG’s native use[href], and where those fit in the problem space. Then we introduce the @svg-use toolchain as a way to make use[href] more ergonomic, in order to make it competitive with inlining.

Finally, we look toward the future, and investigate how future web standards might facilitate these patterns.