Skip to content
Have icons in a Sketch file but don't want to manually extract and compress them as SVGs? Let our SketchSVG tool do it!
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
samples
test
.eslintignore
.eslintrc.js
.gitignore
CONTRIBUTING.md
LICENSE.md
README.md
config.json
index.js
package.json
yarn.lock

README.md

SketchSVG

What is it?

SketchSVG is a CLI that is intended to convert icons made in Sketch to compressed, easy to use SVGs for use on the web. SketchSVG also will convert these to a Base64 encoded value so they can be used in conjunction with the CSS url property.

Installation

Important: It should be noted that this is for Mac only, since Sketch is only on Mac OS npm install sketchsvg -g
or if you prefer yarn yarn global add sketchsvg

Usage

Once installed, run sketchsvg like so:

sketchsvg /full/path/to/file

From there, SketchSVG will convert your icons to SVGs as well as Base64s and output them like so:

alt text

SketchSVG will also generate a basic HTML page with a bare bones editor for you to test out your icons, change the colors, sizes, etc. Here is a screenshot of this:

alt text

Demo

We have included a couple of test files for single as well as multiple icons in a single sketch file. To try it out download our sample files in the /sample folder.

First install sketchsvg and grab our .sketch files from the repo. Then:

sketchsvg /path/to/multitest.sketch

Contributing

Interested in contributing? That's awesome! Please check out our Contributing Guidelines.

Questions/Comments

Feel free to reach out to patrickcanella AT gmail DOT com for any questions or comments regarding this tool. Feel free to open an Issue or a Pull Request as you see fit. Thanks!

License

Copyright 2019 eBay Inc.
Developer: Patrick Canella

Use of this source code is governed by an MIT-style license that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

3rd Party Code

Sketch is a third party tool, not provided with this code, and will need to be licensed separately. For details, see: https://www.sketch.com/

You can’t perform that action at this time.