Exporting from Sketch for icon font


Question

I am trying to export SVG icons from Sketch to import into Fontello, however the SVG's don't appear to be correct for the app (they also do not work in IcoMoon).

The icon I am trying to create as a test is a simple 'hamburger' style icon that is just a few lines, but they will not work correctly. It is frustrating to say the least.

Does anyone have any experience with this and could part with their knowledge? Thank you.

1
9
9/12/2014 1:46:00 PM

Accepted Answer

I figured out how to export SVG from sketch for icomoon correct importing:

Step 1

Prevent SVG from being made out of borders by selecting the path group and clicking on: layer > paths > vectorize stroke

To know that this has worked, the strokes where transformed to closed paths and the inspector now displays the fill color instead of the border color.

Step 2

Export each icon/svg by clicking on the Make Exportable tab on the inspector and selecting SVG format.

Step 3

Import the SVG icons to icomoon as usual, now the set should display the icons correctly and the grid size should be accurate. NOTE: Make sure that all of your SVG's on sketch have the same height.

UPDATE 2016 Thanks to @jackocnr for pointing out that:

In 2016, the Sketch menu option is Layer > Convert to Outlines

11
5/12/2016 4:29:00 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
^