How to only inject symbols that are in use

when using style-loader, the loaded modules determine the css.

However, with sprite-loader, the common use is to have an Icon component that renders a component based on a list of glyphs. This means that when you load the Icon component, all the glyphs get injected in the file.

I would like to know the best technique so that only active glyphs are loaded, specifically for React ≥v0.14.

How about a singleton <Sprites/> component that you put somewhere in your app, which renders the current <symbol/> set, and then instead of <use href… you use <Sprite id={…}/> which, behind the scenes, updates the Sprites element based on refcounting in constructor and componentWillUnmount.

Furthermore, since you can put the sprites at the bottom of the page (proof), I believe that will also solve server side rendering since it will be stringified after all the icons were referenced.

[radiovisual]

And yes, all the required svgs get added to the DOM, even when they are not in use.

This is a concern for me, because it is adding unused elements to the DOM. The projects I work on try to avoid dumping unused data to the DOM to keep the DOM/templates clean and lightweight. Also, in certain situations, SVG’s can come with security risks, so in a paranoid world: it’s best to limit SVG’s to only those you require.

I think that many of the ideas presented by @wmertens are really great, and I think providing a react-specific loader option is a cool idea, or breaking the react-ready component out to it’s own repo.

[kisenka]

New loader version adds ability to specify custom runtime generator. Please check default generator and custom generator implementation example.