https://github.com/cascornelissen/svg-spritemap-webpack-plugin

SVG spritemap plugin for webpack
https://github.com/cascornelissen/svg-spritemap-webpack-plugin

spritemap svg svg-sprites svg4everybody webpack webpack-plugin

Last synced: 2 days ago
JSON representation

SVG spritemap plugin for webpack

• Host: GitHub
• URL: https://github.com/cascornelissen/svg-spritemap-webpack-plugin
• Owner: cascornelissen
• License: mit
• Created: 2016-07-25T07:56:20.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-10-18T06:07:28.000Z (over 1 year ago)
• Last Synced: 2024-05-17T21:46:10.176Z (8 months ago)
• Topics: spritemap, svg, svg-sprites, svg4everybody, webpack, webpack-plugin
• Language: JavaScript
• Homepage:
• Size: 3.72 MB
• Stars: 207
• Watchers: 8
• Forks: 49
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# SVG Spritemap Webpack Plugin

[![npm](https://img.shields.io/npm/v/svg-spritemap-webpack-plugin.svg?style=flat-square)](https://www.npmjs.com/package/svg-spritemap-webpack-plugin)

[![npm](https://img.shields.io/npm/dm/svg-spritemap-webpack-plugin.svg?style=flat-square)](https://www.npmjs.com/package/svg-spritemap-webpack-plugin)

[![codevov](https://img.shields.io/codecov/c/github/cascornelissen/svg-spritemap-webpack-plugin.svg)](https://codecov.io/github/cascornelissen/svg-spritemap-webpack-plugin/)

[![license](https://img.shields.io/github/license/cascornelissen/svg-spritemap-webpack-plugin.svg?style=flat-square)](LICENSE.md)

This [webpack](https://webpack.github.io/) plugin generates a single SVG spritemap containing multiple `` elements from all `.svg` files in a directory. In addition, it can optimize the output and can also generate a stylesheet containing the sprites to be used directly from CSS. Chris Coyier has a good write-up about the why's and how's of this technique on [CSS Tricks](https://css-tricks.com/svg-symbol-good-choice-icons/). Use it in combination with the [`svg4everybody`](https://github.com/jonathantneal/svg4everybody) package to easily and correctly load SVGs from the spritemap in all browsers.

## Installation

```shell

npm install svg-spritemap-webpack-plugin --save-dev

```

## Usage

**Webpack configuration**  

This plugin can be added to webpack like any other, [documentation on all configuration options](/docs/options.md) is available.

```js

const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin');

module.exports = {

    // ...

    plugins: [

        new SVGSpritemapPlugin()

    ]

}

```

**SVG element**  

When there's a file `phone.svg` in the source directory and the `prefix` option is set to `sprite-` (default), the sprite can be included in a HTML-file like so:

```html

    

```

## SVG4Everybody

> [SVG for Everybody](https://github.com/jonathantneal/svg4everybody) adds [SVG External Content](http://css-tricks.com/svg-sprites-use-better-icon-fonts/##Browser+Support) support to [all browsers](http://caniuse.com/svg).

It's a good idea to combine the `svg-spritemap-webpack-plugin` with [`svg4everybody`](https://github.com/jonathantneal/svg4everybody). This can be done by passing an options object or `true` to the `svg4everybody` options key or by executing SVG4Everybody manually.

## License

This project is [licensed](LICENSE.md) under the [MIT](https://opensource.org/licenses/MIT) license.