Exporting SVG icons to use for web overrides classnames colours get all messed up
When you have multiple icons exported in SVG to use for web, once its introduced in the code their classnames get overridden and the colours get messed up of all icons.
Our programmers are having to open each icon in text editor Atom/Sublime and change the name of the class names for a different and unique name to avoid overriding between files. It's quite frustrating and time consuming for them.
Guillermina
shared this idea
Hi Guillermina,
File > Export > Export As provides an option to create unique class names and IDs to avoid clashes when merging different SVG files into one document. In the SVG options panel select “Unique” under “Object IDs”.
Does this address your issue?
Greetings,
Dirk
-
Grant Davis
commented
I think i understand this, i am currently facing this issue as well.
When SVGs are exported, the color swatch names are not used, instead we get cls-1 or cls-2 and so on. It makes more sense to use the swatch names, and then when multiple icons are exported from a single source AI as I am also trying, we can get the correct color values, which can then be altered by the development environment as needed.
One would have to edit the SVG code directly to get the desired color codes, and as the cls-1 names are randomly assign per the source of each file or icon as this is the case, doing a file search and replace is a massive undertaking.