This manual worked for me. it's very informative. he writer talks about sketch exporting problems. i'm quoting from his article in case the article will be removed.
- Create an artboard for each icon (insert -> artboard).
- Make sure each artboard’s position
has no half-pixels and is an even number.
- Remove all icon rotations.
- Remove any bounding boxes so Sketch doesn’t export unneeded code.
- Prevent SVG from being made out of borders layer > paths > vectorize stroke (thanks Gus)
- export Clean .svg
*this is the icon the writer tried to export
Sketch exporting bugs
fixed sketch transform export by changing the artboard position to an even number.
This removes any transform in the code. On another note, since the position was off by half-pixels, Sketch changed the size of my viewbox to 0 0 25 25. My original artboard was 24 x 24px. This bug even added specs to the code. No bueno.
Problem: By design, each icon was set to width: 24px , height: 24px, and border-radius: 3px. The problem is, when exporting, the rectangle was added into the path, thus making it difficult to scale at any size by css.
Solution: Delete any transparent bounding box and let css do the magic. All the developers really needed was the viewbox set to 24 x 24px. They could add in the width, height, and border-radius.
Problem: Sketch exports a rotate(-180.000000).
<path d=”M16,7.4 L14.4864865,6 L8,12 L14.4864865,18 L16,16.6 L11.027027,12 L16,7.4 Z” fill=”#000000" transform=”translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) “></path>
Solution: Open up your .svg icon into Adobe Illustrator, rotate the icon, then drag & drop back into Sketch. This removes the rotation all together.
Problem: using the slice tool export translate and transforms again.
Solution: Nothing. Just don’t do it. It takes too long to slice anyways and is a waste of time.