Awesome

rollup-plugin-sprite

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

Installation

npm i rollup-plugin-sprite -D

Usage

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.