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

Question

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 1

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.

Answer 2

You probably have more than one color in the SVG you're importing. Therefore, your icon is being interpreted as "multicolor". Since font glyphs can only have one color, IcoMoon would have to use multiple paths for multicolor icons. Try changing all the colors in your SVG to the same color and re-import your SVG.

Answer 3

Keyamoon is right. Check this from Icomoon :

Font glyphs cannot have more than one color by default. Using CSS, IcoMoon layers multiple glyphs on top of each other to make color glyphs possible. As a result, these glyphs take more than one character code and cannot have ligatures.

To avoid multicolor glyphs, reimport your SVG after changing all its colors to the same color.

Answer 4

To change the icon in Illustrator and as mentioned in the comments:

1. You need to clear the fills

• Select each path, and use the Fill tool x to remove colors set as None
• Select each path that needs coloring with the SWap Fill and Stroke tool SHIFT+x. Most likely you'll set this color to #000000

2. Substract the shapes and correct the svg

• To visualize the shapes' color, select the View > Show Transparancy Grid SHIFT+CTRL+d
• Create a compound path by selecting the paths in the Layers pane.
• With the paths selected, right mouse in the image and select Make Compound Path.

3. Save to svg in Illustrator

• Use Save As... in Illustrator to save the icon as svg
• Notice the button SVG Code... in the options window and verify the changes by inspecting the source code for the <style> tag.
• If done correctly, and you end up with stroke: #ffffff; rules, that's fine. But fill: #ffffff; should not be visible anymore.

4. In Icomoon using the App

• import the icon ofcourse
• Using the Edit tools ALT:
  • set Grid to 16
  • select Scale to use Fit to Canvas
  • select Canvas/Alignment to use Square Canvas and Align to Center
  • select Remove Colors if any show up