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 | - |

TBD

• [ ] Exploring rectangle packing algorithms
• [ ] Github action
• [ ] Unit test
• [ ] Provide options for image type(png and jpg)
• [ ] Fix the error message that appears when executed by non-administrators