Create a sprite sheet based on spritesmith for Rollup
npm install rollup-plugin-spriteconverts set of images into a spritesheet and SASS/LESS/Stylus mixins based on spritesmith for Rollup.js.




``Shell`
npm i rollup-plugin-sprite -D
`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
}
})
]
};
`
- 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.Released under the MIT license.