DEV Community

Discussion on: What are your best solutions to integrate your SVG icons in your web app ?

Collapse
 
alvaromontoro profile image
Alvaro Montoro

I don't know if this is the best option, but it is the way it's done at my current project: we have an Icons component and an Icon component. The icons is a hidden SVG that behaves as a "sprite" containing all the icons in individual s inside. Then the Icon places a single SVG with a pointing to the right icon id in the sprite. If we have a new icon, we add it to the Icons list and it is available automatically for use. The main inconvenience is that we are loading all the icons at once, even if they are not used. But the size of the Icons component is not that big, and it's a one time thing.