A image sprite generator
A modular image sprite generator.
Generates sprites and proper style files out of a directory of images.
Supports retina sprites.
Can inline base64 encoded sprites.
Supports different output formats
Supports different image engines
Install with npm
npm install sprity --save
If you want to use
sprityon your cli install with:
npm install sprity -g
var sprity = require('sprity'); sprity.create(options, cb);
See sprity-cli for how to use
sprityon the command line.
You can use the sprity.src method with gulp. It creates a gulp compatible vinyl stream. It takes an options object as its only argument.
var gulp = require('gulp'); var gulpif = require('gulp-if'); var sprity = require('sprity');// generate sprite.png and _sprite.scss gulp.task('sprites', function () { return sprity.src({ src: './src/images/*/.{png,jpg}', style: './sprite.css', // ... other optional options // for example if you want to generate scss instead of css processor: 'sass', // make sure you have installed sprity-sass }) .pipe(gulpif('*.png', gulp.dest('./dist/img/'), gulp.dest('./dist/css/'))) });
See grunt-sprity for how to use
spritywith Grunt.
Dimensions are used to specify different sizes of sprites. You can for example create a normal and a retina sprite by providing the following object to
sprity'soptions:
'dimension': [{ ratio: 1, dpi: 72 }, { ratio: 2, dpi: 192 }],
On command line this would work as follows:
sprity out/ images/*.png -s style.css -d 1:72 -d 2:192
You can provide as many dimensions as you want. Just keep in mind that the source images you provide need to be for the biggest dimension. For the above example the images would need to have 192dpi.
When you enable the split option
spritywill look at sub directories of the src option and will generate a sprite per sub directory. For example if you have the following directory structure:
src |- icons |- editor |- file |- maps |- navigation |- notification
and the options:
var options = { out: './dist', src: './src/icons/**/*.png', split: true }
spritywill generate the following sprites in ./dist:
With sprity-cli you would use the command:
sprity create "./dist" "src/sprites/**/*.png" --split
To change the name of the sprites to for example icons-editor.png use the name option:
var options = { out: './dist', src: './src/icons/**/*.png', split: true, name: 'icons' }
spritycan use different image processing engines.
sprityuses the engine to create and manipulate the sprites. Image processing engines may have there specific requirements. So before installing one please have a look at the documentation of the engine.
Since image engines are just node.js modules you can install them with npm.
npm install
You can switch image engines with the engine option. If the image engine name starts with
sprity-you can omit that. For example to use sprity-canvas:
sprity out/ images/*.png -s style.css --engine canvas # or sprity out/ images/*.png -s style.css --engine sprity-canvas
sprity
You can find more about how to write an image processing engine for
sprityin the sprity wiki
Style processors generate are used for the generation of the style files. By default
spritycan create css files, but with the help of style processors it can generate a lot of different formats.
Style processors are simple node modules, you can install them with npm:
npm install
You can switch style processors with the processor option. If the processor name starts with
sprity-you can omit that. For example to use sprity-sass:
sprity out/ images/*.png -s style.scss --processor sass # or sprity out/ images/*.png -s style.scss --processor sprity-sass
sprity
You can find more about how to write your own style processor in the sprity wiki
If you don't want to write a processor module or you only need a simple template for one of you're projects you can use the templating system of
sprity.
sprityuses http://handlebarsjs.com/ to process your templates. To quickly start you can use the templates from sprity-css as a starting point.
You can find more about the variables and functions available in the handlebars templates in the sprity wiki