Please don't import SVGs as JSX. It's the most expensive form of sprite sheet: costs a minimum of 3x more than other techniques, and hurts both runtime (rendering) performance and memory usage. This bundle from a popular site is almost 50% SVG icons (250kb), and most are unused.

If importing an SVG is the best thing for you ergonomically, choose a solution that returns a URL for use with <img>, or extracts them into <defs> for use with <use href="#">. Unlike JS, SVGs inlined into HTML are pretty cheap.

@_developit Jason! Bloooooog poooost plzzzzzzz 😍😀

@_developit What if each SVG is a component? Wouldn't tree shaking (mostly) solve this?

@_developit Just want to know what would be the best way to use svg. Some time i use them as a component. Thank you .

@_developit Unless of course you are going to animate the SVG or you want the SVG to be themed by your css-in-js's context

@_developit What about if you have loads of icons, it's quite common to want to modulate the color of the svg icon. Having it as jsx is super convenient! Doing this with URLs would be annoying?

@_developit Thanks for sharing! I'm a bit lost as to *why* it costs 3x more and the performance is bad though. Care to explain?

@_developit what about dynamic import the icons instead build it in the bundle? as @elastic/eui did

@_developit @smashingmag For those wondering, here's how to create an svg sprite sheet using <symbol> instead of <def> so each sprite can have independent viewBox=, and up to 2 colours defined in .css files: github.com/jesstelford/co…

@_developit Just to be sure I'm understanding, this icon component at the bottom is no worse for the performance of your app than the paragraph component above it right?

@_developit We've tried many tactics, but this has been working well for Ionicons @5.5.1/icons/index.mjs" target="_blank" rel="nofollow noopener">unpkg.com/browse/ionicon… So you can import individual icons as datauri strings, use them in an img, or in ion-icon web component which turns it into an actual <svg>. But that's one of a few formats

@_developit <cough> blueprintjs Who said that

@_developit Yeah unfortunately lulu does this. 800ms of blocking time is related to svg hydration

@_developit Haven't tried it but I assume putting them in a <template> in the HTML and cloning from there works?

@_developit When using http2, is it still recommended to go with svg sprites (and possibly download unnecessary icons), or would it be better to load each individual svg separately?

@_developit I prefer purely CSS based icons CSS.gg nowadays, wherever I can. Re-use shouldn't lead to duplication in the final markup, and if it's there it should be light enough to not penalize the download size much.