https://github.com/linjinying/rollup-plugin-sprite

Create a sprite sheet based on spritesmith for Rollup.js
https://github.com/linjinying/rollup-plugin-sprite

rollup rollup-plugin rollup-plugin-sprite spritesmith

Last synced: 2 months ago
JSON representation

Create a sprite sheet based on spritesmith for Rollup.js

• Host: GitHub
• URL: https://github.com/linjinying/rollup-plugin-sprite
• Owner: narol1024
• License: mit
• Created: 2018-01-23T11:27:57.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2021-08-01T10:54:20.000Z (over 3 years ago)
• Last Synced: 2024-05-18T20:42:08.467Z (7 months ago)
• Topics: rollup, rollup-plugin, rollup-plugin-sprite, spritesmith
• Language: JavaScript
• Homepage:
• Size: 23.4 KB
• Stars: 9
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - spritesmith - sheet. (Plugins / Other File Imports)

README

        
# rollup-plugin-sprite

converts set of images into a spritesheet and SASS/LESS/Stylus mixins based on spritesmith for [Rollup.js](https://github.com/rollup/rollup).  

[![Build Status](https://travis-ci.org/inarol/rollup-plugin-sprite.svg?branch=master)](https://travis-ci.org/inarol/rollup-plugin-sprite)

[![NPM version](https://img.shields.io/npm/v/rollup-plugin-sprite.svg?style=flat)](https://www.npmjs.com/package/rollup-plugin-sprite)

[![NPM package download of month](https://img.shields.io/npm/dm/rollup-plugin-sprite.svg)](https://www.npmjs.com/package/rollup-plugin-sprite)

[![Coverage Status](https://coveralls.io/repos/github/inarol/rollup-plugin-sprite/badge.svg?branch=master)](https://coveralls.io/github/inarol/rollup-plugin-sprite?branch=master)

## 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](https://github.com/twolfson/spritesheet-templates#templates)

- `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](https://github.com/Ensighten/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](./LICENSE).