SVG for Ico using icomoon generates multiple paths instead of one object symbol
I am using illustrator to create an 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 concentric circles that are saved as SVG in Illustrator. SVG is converted to icons using icons, I can 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>
Image link: http://imgur.com/FnWgQNF
source to share
You probably have more than one color in the SVG that you are importing. Therefore, your icon is interpreted as "multicolor". Since font glyphs can only have one color, IcoMoon will have to use multiple paths for multi-colored icons. Try changing all colors in SVG to one color and re-importing the SVG.
source to share
I had the same problem. Tried the view transparency grid in illustrator removing all color in illustrator by subtracting transparencies and it all fails.
Then I discovered in IcoMoon that if at the bottom instead of clicking "Generate Font" you select "SVG and more", you can click the problem icon and edit the SVG right in the application. IcoMoon has a "Remove Colors" button (drop with x). Once you do that you can close that box and your svg will be monochrome, no need to reimport it. Then you can download it or just click to generate your font. TA-dah!: -)
It took me a while to figure it out, but as soon as I did, I was sold on as a really cool addict.
source to share
Keyamoon is right. Check it out from Icomoon:
The neck of a font cannot have more than one default color. Using CSS, IcoMoon splits multiple glyphs on top of each other to make colored glyphs possible. As a result, these glyphs accept more than one character code and cannot have ligatures.
To avoid multi-color glyphs, reimport your SVG after changing all of its colors to the same color.
source to share