Images-sprite-generator NPM

sprite-generator

You only need to specify the path where the images exists(png only), images-sprite-generator can help you to generate a stylesheet with sprite.

Usage

NPX

npx images-sprite-generator gen-sprite args...

Example(base64)

npx images-sprite-generator gen-sprite --src=./icons/ --cssOutput=./output.css

.sprite__{image name}
{
    width: 10px;
    height: 10px;
    background-position: -10px -10px;
}

...

.sprite {
    background-image: url(base64);
}

Example(create new png)

npx images-sprite-generator gen-sprite --src=./icons/ --cssOutput=./output.css --spriteOutput=./sprite.png

.sprite__{image name}
{
    width: 10px;
    height: 10px;
    background-position: -10px -10px;
}

...

.sprite {
    background-image: url(./sprite.png);
}

Example(HTML)

and then you can easily use sprite icon in your html.

<div class="sprite sprite__image-name"></div>

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	-