- Support for SVG/PNG/JPG sprites
- Generate CSS/JSON descriptors
- Simple: tiny source, minimal dependencies. Please fork/contribute!
This package relies on GraphicsMagick, so:
- OS X:
brew install graphicsmagick
sudo apt-get install graphicsmagick
npm install -g spritesheet-assembler
spass -i icons/ -o images/spritesheet.png -d styles/icons.css
Spritesheet packing algorithm is based on the one described in Jake's great article. This implementation, however, doesn't use binary tree, maintaining instead a list of free spaces.
The code is split into three parts:
lib/- all the logic of bin-packing is here. Lib provides core abstractions of
SpriteSheet, as well as the bin-packing algorithm itself. This folder doesn't and shouldn't depend on any core node modules.
compositors/- this folder contains compositors, which are responsible for building actual spritesheet out of sprites. Compositors are associated with export mime types, the relation is defined in
descriptors/- this folder contains spritesheet descriptor generators. Descriptor generators are associated with descriptor mime type, the relation is defined in
Each test runs spritesheet-assembler with given arguments and compares generated files with expected results.
To run all tests:
To run only tests with 'svg' in name:
npm test -- svg
To reset test results for all svg tests: (or generate results for a newly added test):
npm test -- svg reset-results
To add a test:
- create a new folder under
tests/folder which starts with two-digit number, e.g.
arguments.jsfile which should define input arguments for the utility: example
This started as a patch to Chrome DevTools project: https://codereview.chromium.org/2671413004/
See LICENSE here.