Converting SVG to font icon using icomoon

Question

I have an svg which when opened in any browser comes up fine. I am trying to convert a bunch of them to font icons using http://icomoon.io/ but it's not coming up correctly after importing. I tried using http://fontastic.me/ as well but no luck.

Here is the SVG Image markup -

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve" style="
    color: red;
">
<path fill="none" stroke="#231F20" stroke-width="15" stroke-miterlimit="10" d="M323.41,321.664c0,0.457-0.371,0.828-0.828,0.828  H88.835c-0.458,0-0.829-0.371-0.829-0.828V87.918c0-0.459,0.371-0.829,0.829-0.829h233.747c0.457,0,0.828,0.37,0.828,0.829V321.664z  " style="
    color: red;
"/>
<path fill="none" stroke="#231F20" stroke-width="15" stroke-miterlimit="10" d="M215.311,196.935"/>
<path fill="none" stroke="#231F20" stroke-width="15" stroke-miterlimit="10" d="M250.935,277.399  c25.36-14.769,42.409-42.247,42.409-73.71c0-47.078-38.164-85.242-85.242-85.242s-85.242,38.164-85.242,85.242  c0,31.463,17.048,58.941,42.408,73.71"/>
<g>
    <path fill="#231F20" d="M173.653,282.14l-4.741-48.439c-0.059-0.58-0.327-1.092-0.715-1.482l-47.088,54.471   c0.48,0.449,1.127,0.714,1.82,0.676l48.578-2.721C172.82,284.568,173.783,283.448,173.653,282.14z"/>
</g>
<text transform="matrix(1 0 0 1 175.665 231.1914)" fill="#231F20" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" font-family="'Helvetica'" font-size="99.4919">A</text>
</svg>

I am guessing that it has something to do with how the image was created but can't find much resources on how to resolve the issue. Any help would be awesome!

Thanks.

Solution 1

IcoMoon will ignore stroke attributes and text objects. It is only interested in filled shapes. In your case, that means it will only import the triangle at the end of the circular curve.

You need to convert your paths and text into filled shapes. In Inkscape, try selecting your artwork and pressing CtrlShiftC. In Illustrator, there's an Outline Stroke option somewhere in the Path menu, and the command for converting text to outlines is, if I recall correctly, ⌘ShiftC on a Mac (probably ControlShiftC otherwise).

If you have any overlapping objects, they will probably have to be merged together too.

And don't expect perfect results. IcoMoon does a reasonable job, but it may convert curves into straight lines in some situations.

Solution 2

A little late to the party but I was facing the same issue so I created a node package that solves this issue.

Here is the SVG code after I run it through the fixer.

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve" style="
    color: red;
">
    <path d="M86.837 79.979 C 85.648 80.263,84.203 80.888,83.627 81.366 C 80.532 83.935,80.666 78.331,80.676 204.800 C 80.684 298.546,80.862 324.015,81.520 325.313 C 81.978 326.219,83.371 327.646,84.616 328.485 L 86.880 330.011 206.491 329.839 L 326.103 329.667 328.385 327.176 L 330.667 324.686 330.664 205.176 C 330.662 88.016,330.636 85.625,329.367 83.543 C 328.654 82.374,327.380 81.024,326.536 80.543 C 325.285 79.829,303.087 79.648,207.000 79.564 C 142.100 79.507,88.027 79.694,86.837 79.979 M315.835 204.833 L 315.667 315.000 205.667 315.000 L 95.667 315.000 95.498 204.833 L 95.329 94.667 205.667 94.667 L 316.004 94.667 315.835 204.833 M201.667 111.423 C 179.577 112.824,159.847 121.654,143.696 137.367 C 129.783 150.904,121.330 166.288,117.228 185.541 C 115.150 195.292,115.144 212.170,117.214 221.792 C 120.507 237.099,126.508 249.962,135.686 261.389 L 139.212 265.778 130.329 276.056 C 125.444 281.708,121.673 286.570,121.950 286.860 C 122.463 287.397,171.797 284.871,172.790 284.257 C 173.650 283.726,173.457 280.317,171.348 258.667 C 169.053 235.120,168.747 232.657,168.126 232.694 C 167.873 232.708,163.617 237.490,158.667 243.319 C 153.717 249.148,149.440 253.936,149.163 253.958 C 148.228 254.036,142.022 245.037,139.077 239.333 C 133.176 227.903,130.621 217.133,130.615 203.667 C 130.612 194.149,131.713 187.008,134.444 178.832 C 144.896 147.548,174.861 126.000,207.913 126.000 C 245.648 126.000,277.349 152.422,284.737 190.029 C 285.202 192.397,285.582 198.533,285.582 203.667 C 285.582 213.615,284.891 218.403,282.218 226.971 C 277.195 243.073,265.595 258.719,251.958 267.787 C 249.394 269.492,247.379 271.069,247.481 271.290 C 248.939 274.458,254.512 283.326,255.048 283.329 C 255.441 283.331,257.991 281.800,260.715 279.927 C 282.280 265.091,296.736 241.199,300.043 214.926 C 301.036 207.038,300.543 192.970,299.018 185.667 C 289.357 139.397,248.759 108.436,201.667 111.423 M202.120 160.810 C 201.391 162.748,195.065 179.433,188.064 197.888 C 181.062 216.343,175.333 231.568,175.333 231.721 C 175.333 231.875,178.049 232.000,181.367 232.000 L 187.401 232.000 188.262 229.833 C 188.736 228.642,190.255 224.436,191.638 220.488 L 194.154 213.310 209.828 213.488 L 225.502 213.667 228.665 222.667 L 231.829 231.667 237.968 231.859 C 243.609 232.036,244.075 231.955,243.722 230.859 C 243.510 230.203,237.210 213.467,229.721 193.667 L 216.105 157.667 209.776 157.477 L 203.447 157.286 202.120 160.810 M215.923 187.752 C 218.899 195.865,221.333 202.690,221.333 202.918 C 221.333 203.147,216.083 203.333,209.667 203.333 C 203.250 203.333,198.000 203.185,198.000 203.003 C 198.000 202.821,200.283 196.446,203.072 188.836 C 205.862 181.226,208.455 174.138,208.833 173.084 C 209.715 170.630,209.421 170.024,215.923 187.752 " stroke="none" fill="black" fill-rule="evenodd"></path>
</svg>

• Here is what the SVG looks like on icomoon.io after it's fixed using the package.

• Before it would look like this.

  Notice the missing "A" in the middle of the icon and the mismatching colors