Spritesheet-assembler NPM

Spritesheet Assembler

Support for SVG/PNG/JPG sprites
Generate CSS/JSON descriptors
Simple: tiny source, minimal dependencies. Please fork/contribute!

Install

This package relies on GraphicsMagick, so:

OS X: brew install graphicsmagick
Linux: sudo apt-get install graphicsmagick

Install:

npm install -g spritesheet-assembler

And run:

spass -i icons/ -o images/spritesheet.png -d styles/icons.css

Demos

CSS SpriteSheet demo
Spritesheet packing algorithm demo
Check out utility results in tests

Algorithm

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.

Code Overview

The code is split into three parts:

lib/ - all the logic of bin-packing is here. Lib provides core abstractions of Sprite and 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 compositors/index.js.
descriptors/ - this folder contains spritesheet descriptor generators. Descriptor generators are associated with descriptor mime type, the relation is defined in descriptors/index.js.

Tests

Each test runs spritesheet-assembler with given arguments and compares generated files with expected results.

To run all tests:

npm test

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. tests/01-some-new-test/.
add arguments.js file which should define input arguments for the utility: example