ysprite

3.0.0 • Public • Published

ysprite

npm version Build Status Coverage Status Dependency Status devDependency Status npm

A lightweight yet powerful css sprite util.

Install

NPM

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

import sprite, { generateStyle, generateSprite } from 'ysprite';
 
// sprite is sprite options, style is style options
sprite(imgGlob|dir, { sprite, style }).then(({
    image, // Buffer, normal image
    retina, // Buffer, retina image
    imagePath,
    retinaImagePath,
    style, // String, css
    stylePath
}) => {
    // do something
})
 
generateSprite(imagePathList, spriteOpts).then(data => {
    return generateStyle(data[0].source, styleOpts)
}).then(style => console.log(style))

sprite(imgGlob, { sprite, style })

  • imgGlob could be dir (like images/icons) or glob (like images/icons/**/*.png)

    And when you use dir, it's equal glob dir/**/*.png

  • sprite and style are options, described below.

  • return a promise, and you could get an object like:

    {
        image, // Buffer, normal image
        retina, // Buffer, retina image
        imagePath, // image path
        retinaImagePath, // retina image path
        style, // String, css
        stylePath // 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, so play.png will be .icon-play with default option.
  • eol's default value is require('os').EOL, so \r\n in Windows.
  • 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 by generateStyle
  • options is style options described above.
  • return a promise, and you can get the style content.

License

MIT

Package Sidebar

Install

npm i ysprite

Weekly Downloads

0

Version

3.0.0

License

MIT

Last publish

Collaborators

  • creeper