1.0.6 • Published 8 years ago

sprite-webpack-plugin v1.0.6

Weekly downloads
2
License
MIT
Repository
github
Last release
8 years ago

Sprite-webpack-plugin

Enviroment

  Node < 6.0, webpack 1.0

Install

  npm install sprite-webpack-plugin --save-dev

Usage

  • A simple example, in webpack config file:
  var sprite = require('sprite-webpack-plugin');

  module.exports = {
    plugins: [
      new sprite({
        'source' : __dirname + '/source/',
        'imgPath': __dirname + '/images/',
        'cssPath': __dirname + '/styles/'
      });
    ]
  }

Options

  source {String} path to icons dir

  imgPath {String} path to image(s) output dir

  cssPath {String} path to style(s) output dir

  prefix  {String} icon prefix name, default "icon"

  connector {String} an connection between prefix and icon name.
             "-", "_", "capitalize", ""(means nothing), default "-"

  spriteName {String} prefix name of images and css files, default "sprite"

  baseName {String} file name if only one css file will be created

  orientation {String} 'vertical' or 'horizontal', default 'vertical'

  format {String} image format, 'png' or 'jpg', default 'png'

  processor {String} css processor, 'css' or 'less' or 'sass' or 'stylus', default 'css'

  opacity {Number} 0 - 1, default 0

  isBundled {Boolean} bundle all icons as a single one image file or output them
            based your directory structure (means one subdir could produce
            one image file and one css file), default true

  enlarge {Number} for retina display, valid number 1 - 3, default null

  margin {Number} make sprite image prettier, valid number 2 - 10, default 2

  templatePath {String} define your own css template, default null

  fixedStylePath {String} this is for the css property 'background-url',
                 if you know the image url, you can assign it here, recommend.
                 otherwise the plugin will use the relative path.
                 **add support for base64, simply just using this word.**

If you want to use your own template, here is the object will return to it:

  @return Object:
    {
      items:
      [
        {
          name: '' // Icon name,
          x: // X of background position,
          y: // Y of background position,
          width: // Icon width,
          height: // Icon height,
          image: // Background image url,
          escaped_image: // Background image url,
          total_width: // Image width,
          total_height: // Image height,
          offset_x: // offset x,
          offset_y: // offset y,
          px: [
            {
              enlargedImage: // retina image url,
              enlargedX: // Background size width,
              enlargedY: // Background size height,
            }
          ],
          class: // Icon class name,
          enlargedImage: // Retina image url,
          enlargedX: // Background size width,
          enlargedY: // Background size height
        },
      ],
      enlarge: // DPR value,
      imgUrl: // Background image url,
      imgHdUrl: // Retina image url,
      imgName: // Image name,
      nameClass: // className base on image base in case for some special usege,
      enlargedX: // Background size width,
      enlargedY: // Background size height
    }

A more imaginable way to explainate option "isBundled"

source directory structure
├── src
    └── styles
    └── images
        └── spritesource
            └── home
            │   └── example.png
            └── users
            │   └── user.png
            └── button.png

If you set true, the output would look like this:

├── src
    └── styles
        └── sprite-base.css
    └── images
        └── sprite-base.png
        └── spritesource
            └── home
            │   └── example.png
            └── users
            │   └── user.png
            └── button.png

If you set false, then it would look like this:

├── src
    └── styles
    │   └── sprite-base.css
    │   └── sprite-home.css
    │   └── sprite-users.css
    └── images
        └── sprite-base.png
        └── sprite-home.png
        └── sprite-users.png
        └── spritesource
            └── home
            │   └── example.png
            └── users
            │   └── user.png
            └── button.png

By the way, the className is: "." + prefix + connector + iconName

Help & License:

If there are still any questions remained, don't hesitate to start an issue or you can pull a request to help it, cheers.

Partially inspired by Css-Sprite, thanks. Project code is released under MIT license:

1.0.6

8 years ago

1.0.5

8 years ago

1.0.4

8 years ago

1.0.3

8 years ago

1.0.2

8 years ago

1.0.0

8 years ago

0.3.6

9 years ago

0.3.5

9 years ago

0.2.7

10 years ago

0.2.6

10 years ago

0.2.5

10 years ago

0.2.4

10 years ago

0.2.3

10 years ago

0.2.2

10 years ago

0.2.1

10 years ago

0.2.0

10 years ago

0.1.10

10 years ago

0.1.9

10 years ago

0.1.8

10 years ago

0.1.7

10 years ago

0.1.6

10 years ago

0.1.5

10 years ago