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: 5 months 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 (about 9 years ago)
- Default Branch: master
- Last Pushed: 2025-05-06T21:42:36.000Z (5 months ago)
- Last Synced: 2025-05-06T22:33:47.519Z (5 months ago)
- Topics: spritemap, svg, svg-sprites, svg4everybody, webpack, webpack-plugin
- Language: JavaScript
- Homepage:
- Size: 2.77 MB
- Stars: 211
- Watchers: 7
- Forks: 51
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# SVG Spritemap Webpack Plugin
[](https://www.npmjs.com/package/svg-spritemap-webpack-plugin)
[](https://www.npmjs.com/package/svg-spritemap-webpack-plugin)
[](https://codecov.io/github/cascornelissen/svg-spritemap-webpack-plugin/)
[](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.