WORK IN PROGRESS
A Sketch plugin to generate an "SVG Spritesheet" from your selected layers. An SVG Spritesheet is an <svg>
element with named <symbol>
elements that can relatively easily be refereced from websites. The file looks something like this:
<svg>
<symbol id="arrow-left">...</symbol>
<symbol id="arrow-right">...</symbol>
<symbol id="home">...</symbol>
<symbol id="dashboard">...</symbol>
</svg>
Then in your HTML you can use the icon with:
<svg>
<use href="/path/to/icons.svg#arrow-right"></use>
</svg>
These work really well with EveryLayout's icon-layout
- Download the latest release of the plugin
- Un-zip
- Double-click on sketch-spritesheet.sketchplugin
- Select the artboards you want to generate a spritesheet from
- Navigate to Plugins → SVG Spritesheet → Generate in the menu
- Choose where you want the SVG to be saved to
As a bonus, the SVG embeds <use>
tags within it so that you get a nice preview of all your icons in the macOS.
This plugin was created using skpm
. For a detailed explanation on how things work, checkout the skpm Readme.
Install the dependencies
npm install
Once the installation is done, you can run some commands inside the project folder:
npm run build
To watch for changes:
npm run watch
Additionally, if you wish to run the plugin every time it is built:
npm run start
To view the output of your console.log
, you have a few different options:
- Use the
sketch-dev-tools
- Run
skpm log
in your Terminal, with the optional-f
argument (skpm log -f
) which causesskpm log
to not stop when the end of logs is reached, but rather to wait for additional data to be appended to the input
skpm publish <bump>
(where bump
can be patch
, minor
or major
)
skpm publish
will create a new release on your GitHub repository and create an appcast file in order for Sketch users to be notified of the update.