Hello,
I'm developing a web app and there is something I can't manage very well: it's SVG icons management !
Let me explain, I'm working with a Designer who creates SVG icons for the website, and I don't know how to manage them correctly and I would like to know which solution do you use everyday to manage them.
I know there are tools like Icomoon, but I don't want to regenerate a font everytime we add a new SVG to our icon library. I would like to use my svg icons easily and be able to customize them (fill color, size, ...) that's why I can't use a <img src="my-svg"/>.
Actually, I'm using Vue.js to build my web app and when I have a new icon, I create a new Vue component which is a copy of the SVG icon and I add some props like: color, width, height ... but I'm pretty sure there's a better way to handle my problem.
Do you have any suggestion of tools I could use to better manage my SVG icons ?
Top comments (1)
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.