Importing icons from Sketch often does not work

92 views
Skip to first unread message

Laurent Le Graverend

unread,
Oct 24, 2014, 11:25:57 PM10/24/14
to ico...@googlegroups.com
Just purchased an unlimited plan for IconMoon.

I face difficulties importing SVG icons exported
by Sketch.
Sometimes it does work but most of the time, I see an empty icon when importing SVG files from Sketch into IconMoon.

Sometimes re-importing into photoshop / illustrator and re exporting will fix this issue but most of the time not.

What is wrong with these export and how can I fix it?

Below an example with a Search icon.


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="43px" height="43px" viewBox="0 0 43 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
   
<!-- Generator: Sketch 3.1.1 (8761) - http://www.bohemiancoding.com/sketch -->
   
<title>search</title>
    <desc>Created with Sketch.</
desc>
   
<defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <path d="M27.868926,26.6214562 C30.2948914,23.9017637 31.7692308,20.3150552 31.7692308,16.3846154 C31.7692308,7.88653846 24.8817308,1 16.3846154,1 C7.88846154,1 1,7.88653846 1,16.3846154 C1,24.8798077 7.88846154,31.7692308 16.3846154,31.7692308 C20.3137109,31.7692308 23.8986434,30.2961553 26.6175899,27.8723976 L39.7442308,41 L41,39.7451923 L27.8721154,26.6182692 L27.868926,26.6214562 L27.868926,26.6214562 Z" id="search" stroke="#000000" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></
path>
   
</g>
</
svg>

Keyamoon

unread,
Oct 25, 2014, 5:44:33 AM10/25/14
to
This can be caused by different reasons. But in the case of the SVG above, since IcoMoon doesn't currently support strokes, you need to convert them to fills. In Adobe Illustrator, you can do this conversion via Object > Expand. Sketch might have a similar option.

Laurent Le Graverend

unread,
Oct 25, 2014, 5:51:51 AM10/25/14
to ico...@googlegroups.com
Thanks for your quick reply about the stroke issue, helpful.

In Sketch: Layer > Paths > Vectorize Stroke
Did the job.
Reply all
Reply to author
Forward
0 new messages