Skip to content

Create a sprite sheet based on spritesmith for Rollup.js

License

Notifications You must be signed in to change notification settings

narol1024/rollup-plugin-sprite

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

rollup-plugin-sprite

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

Build Status NPM version NPM package download of month Coverage Status

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.