https://github.com/creeperyang/ysprite
A lightweight yet powerful css sprite util.
https://github.com/creeperyang/ysprite
cli-utilities sprite sprite-image
Last synced: about 1 month ago
JSON representation
A lightweight yet powerful css sprite util.
- Host: GitHub
- URL: https://github.com/creeperyang/ysprite
- Owner: creeperyang
- License: mit
- Created: 2015-12-15T15:39:25.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-12-02T14:22:40.000Z (over 8 years ago)
- Last Synced: 2024-10-12T13:27:11.314Z (6 months ago)
- Topics: cli-utilities, sprite, sprite-image
- Language: JavaScript
- Homepage:
- Size: 213 KB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# ysprite
[](https://badge.fury.io/js/ysprite)
[](https://travis-ci.org/creeperyang/ysprite)
[](https://coveralls.io/github/creeperyang/ysprite?branch=master)
[](https://david-dm.org/creeperyang/ysprite)
[](https://david-dm.org/creeperyang/ysprite#info=devDependencies)
[](https://www.npmjs.com/package/ysprite)
> A lightweight yet powerful css sprite util.
## Install
[](https://nodei.co/npm/ysprite/)
**Note:**
Core dependency `[email protected]` 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:
```bash
ysprite -s test/res/icons -o .tmp/x.png --out-style .tmp/x.css
Sprite successfully!
image: .tmp/x.png retina: .tmp/[email protected] style: .tmp/x.css
```
### Use API
```js
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:
```js
{
image, // Buffer, normal image
retina, // Buffer, retina image
imagePath, // image path
retinaImagePath, // retina image path
style, // String, css
stylePath // style path
}
```
**sprite options**
```js
{
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**
```js
{
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:
```js
{
// 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