SVGito is a web app created by Peter Nowell that cleans up SVG files exported from the Sketch App. You copy and paste the SVG code, or drag and drop it into the app and it does its magic:
During the cleanup process it does four things to the SVG:
Cleans up Sketch Layers with Fills + Inside/Outside Borders
Replaces “Single-Instance” <use> Elements with Their Reference
Removes Unnecessary Fill-Rule Attributes
Removes <defs> if there’s nothing inside
This tool is designed primarily for SVG’s exported from Sketch, but I’d love to see it add support for renaming styles inside other SVG’s. For example, last week I hit a weird issue where multiple SVG files defined styles with the same name, .cls-1, When I added these inline, they would conflict causing the icons to display wrong. The solution, in this case, was to open each one individually and do a find and replace on the cls-1 selectors.
Airbnb released a new open-source library named React-sketchapp that allows you to write React components that render to Sketch documents.
Getting started with this new tool is easy. Just be sure you are running Sketch 43+ and have a recent install of NPM. Then install it and run it with the following:
git clone https://github.com/airbnb/react-sketchapp.git
cd react-sketchapp/examples/basic-setup && npm install
npm run render
Even the code output from their example is not horrid like you might expect from a tool like this:
Steve Schoger, the creator of the popular service Hero Patterns, created a video tutorial on how he puts together seamless patterns using the Sketch app.
I’m always fascinated at watching the way other people work especially when they are using tools that I use, but that I’m not an expert at. Even though I’ll probably never create a seamless pattern, I picked up a few tips to increase my Sketch productivity in this video.
For more information on how to handle the CSS side after exporting check out his accompanying blog post.