rollup-plugin-sprite

converts set of images into a spritesheet and SASS/LESS/Stylus mixins based on spritesmith for Rollup.js.


Installation

``Shell
npm i rollup-plugin-sprite -D
`

Usage

`javascript
import spritesmith from "rollup-plugin-sprite";

export default {
input: "src/main.js",
plugins: [
spritesmith({
src: {
cwd: "./src/ui/images/sprite",
glob: "*/.png"
},
target: {
image: "./src/ui/images/sprite.png",
css: "./src/ui/sass/sprite.scss"
},
cssImageRef: "../images/sprite.png",
output: {
image: "./dist/images/sprite.png"
},
spritesmithOptions: {
padding: 5
}
})
]
};
`

Config


- src - used to build list of source images.
- cwd should be the closest common directory for all source images;
- glob it is a glob. such as */.png

- target - set files path where generated the sprite or stylesheet.
- image - target image filename;
- css - can be one of the following, scss,less,css,stylus,json.see details

- cssImageRef - optional, path by whic h generated image will be referenced in API. If target.image is interpolated, cssImageRef should be interpolated the same way too. Default: ../images/sprite.png

- output - optional, set output folder where the sprite or stylesheet will be saved.
- image - the image file path
- css - the stylesheet path

- spritesmithOptions - optional. Options for spritesmith.

- customTemplates` - optional. Object with keys and values corresponding to format names and template descriptions respectively. Template description can be either a path/to/template/file.handlebars or template function.

License

Released under the MIT license.