ysprite
A lightweight yet powerful css sprite util.
Install
Note:
Core dependency lwip@0.0.9
depends on C++11
compiler, so you should install gcc/g++-4.8
or something like first.
Usage
ysprite
has a built-in cli, so you can use both cli and node API.
Use Cli
If you want to use the cli everywhere, install globally (npm i -g ysprite
).
And then, it's ready to use:
ysprite -s test/res/icons -o .tmp/x.png --out-style .tmp/x.css Sprite successfully! image: .tmp/x.png retina: .tmp/x@2x.png style: .tmp/x.css
Use API
; // sprite is sprite options, style is style options
sprite(imgGlob, { sprite, style })
-
imgGlob
could bedir
(likeimages/icons
) orglob
(likeimages/icons/**/*.png
)And when you use dir, it's equal glob
dir/**/*.png
-
sprite
andstyle
are options, described below. -
return a promise, and you could get an object like:
image // Buffer, normal imageretina // Buffer, retina imageimagePath // image pathretinaImagePath // retina image pathstyle // String, cssstylePath // style path
sprite options
imagePath // required, dest image path retinaImagePath // dest retina image path retina // whether to enable retina mode filter // filter out normal image retinaFilter // filter out retina image writeToFile // whether write sprite image to file margin = 0 // margin between icons compression = 'high' // output png compression, one of ['none', 'fast', 'high'] interlaced = false // whether enable png interlaced arrangement = 'compact' // arrangement of images: 'vertical'|'horizontal'|'compact'
style options
connector = '-' // className connector, default to "-" prefix = 'icon' // className prefix, default to "icon" suffix = '' // className suffix eol // new line retina = false // whether generate retina style writeToFile = false // whether write style to file stylePath // style path imagePath // image path retinaImagePath // retina image path banner = false // banner
- Icon's className is composed by
prefix + connector + name + suffix
, soplay.png
will be.icon-play
with default option. eol
's default value isrequire('os').EOL
, so\r\n
inWindows
.banner
could be string (be put in head with origin text),true
(a timestamp), and false (no banner).
generateSprite(imagePathList, options)
imagePathList
should be array of image path.options
is sprite options described above.- return a promise, and you can get data:
// every single icon's info, like [{ x, y, margin, width, height, path }], // used by generateStyle source path // image path params // { compression, interlaced: true|false, transparency: true} image // it's lwip's image, you can do some magic thing with it. width // image width height // image height
generateStyle(imageInfoList, options)
imageInfoList
should be array of image info, generated bygenerateStyle
options
is style options described above.- return a promise, and you can get the style content.
License
MIT