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 If you define them in <defs> do all the SVGs have to be defined inline? One for the defs and then one for each usage?

@_developit What's the best approach to use in web components? I assume <use> won't work as it uses URI fragments. Cloning svg using <template>?

@_developit What about a web component that fetches them on request? twitter.com/galstar/status…

@_developit <img> doesn't work with CSS and currentColor for fill. When using React putting it into JSX in React components is the easiest. With code splitting it's not as bad I guess. Is there an easy solution (e.g. bundler-based) for the <use> approach? That would probably be best.

@_developit You're doing the lords work

@_developit They are not cheap when they are 3000 elements (tried going this route with an emoji keyboard, font or png sprite is so much better)

@_developit That's interesting for sure. I assume same will apply for any webcomponent event using <svg>?

@_developit @nuxt_js I think there's an opportunity here to introduce a performance win regarding this comment with the following PR. github.com/nuxt-community… cc. @_pi0_ @Atinux

@_developit I'm mostly use symbols or in combination with `img`.

@_developit So if I have an Icon component which has a map of imported icons and renders the SVG based on a name prop. What’s the best solution here when importing the svgs? I’m currently lazy loading the imports but that might not be the best solution 🤷‍♂️