SVG to Ico using icomoon generates multiple path instead of single object glyph

Prabesh picture Prabesh · Jun 9, 2015 · Viewed 8.1k times · Source

I am using illustrator to create a SVG file that will be converted to a font icon using icomoon. But I am having problems with the end result. My icon is essentially set of concentric circles, which is saved as SVG in illustrator. The SVG is converted to icons using iconmoon, I see that the icon is converted to multiple paths instead of a single object.

    <span class="icon-4">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
<span class="path4"></span>
<span class="path5"></span>
<span class="path6"></span>
</span>

Link to the image : http://imgur.com/FnWgQNF

Answer

Joshua Jarman picture Joshua Jarman · Jul 7, 2017

I had this exact same issue. Tried view transparency grid in illustrator, removing all color in illustrator, subtracting the transparencies, all with no luck.

Then i discovered in IcoMoon, that if at the bottom instead of clicking "Generate Font" you choose "SVG and More" you can click on the problem icon and edit the SVG right in the app. IcoMoon helpfully has a "Remove Colors" button (drop with x). Once you've done that you can close that box and your svg is monochrome, no need to reimport it. You can then download it, or just click to generate your font. Tada! :-)

It took me a while to figure this out, but once i did i was sold on how awesome icomoon really is.