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 : https://i.sstatic.net/ktv3N.jpg

Nickinickie

Why is it a problem that it now consists of multiple paths? – Molten

Post a link to the image and one of us can add it for you. Also we need more info. Posting some HTML doesn't help us diagnose problems with SVGs and/or fonts. – Judah

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.

Gandzha

This is the correct route. When removing the colors, make sure nothing specific is selected. – Matazzoni

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.

Alkahest

My SVG icon is black-and-white, the white being used to "erase" the black on some parts. Is there a way to turn this into a "monocolor svg" for icomoon? – Tarahtaran

Instead of using white fills, subtract the shape above from the one below to make a hole. – Alkahest

I had the above issue: multi-colors. I was using Illustrator (and not really knowing what I was doing) and the SVG being created was black and white. I had to go to View > Show Transparency Grid to remove the white background and then re-export as an SVG. – Lance

But what if i actually need multiple colors in the generated font. is there any way? – Ahasuerus

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.

Colonnade

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

Haile

Answer 5

in case one of the elements on the svg is a character (font) first convert to shape, and then select both layers and in the pathfinder panel select "click to minus front" that should convert both layers to one single color layer

Electronics

Answer 6

You will want to select all the paths you want to merge (exclude any internal paths you do not want to merge).

After open your Pathfinder panel and press Unite. This will merge the objects.

Then go to top menu and click Object tab, in drop down choose compound path and press make.

Cottbus