images-sprite-generator is a tool to generate css with image sprite.
npm install images-sprite-generatorcommand
npx images-sprite-generator gen-sprite args...
`
$3
`command
npx images-sprite-generator gen-sprite --src=./icons/ --cssOutput=./output.css
`
`css
.sprite__{image name}
{
width: 10px;
height: 10px;
background-position: -10px -10px;
}
...
.sprite {
background-image: url(base64);
}
`
$3
`command
npx images-sprite-generator gen-sprite --src=./icons/ --cssOutput=./output.css --spriteOutput=./sprite.png
`
`css
.sprite__{image name}
{
width: 10px;
height: 10px;
background-position: -10px -10px;
}
...
.sprite {
background-image: url(./sprite.png);
}
`
$3
and then you can easily use sprite icon in your html.
`html
`
Options
| args | description | type | default |
| -------------- | ---------------------------------------- | ------ | ------------ |
| src | path of images.(required) | string | - |
| padding | padding of each images | number | 10 |
| spaces | the number of spaces for stylesheet | number | 4 |
| prefix | prefix of class name for stylesheet | string | sprite |
| cssOutput | output path of stylesheet | string | output.css |
| spriteOutput` | sprite png path, base64 mode if is empty | string | - |