https://github.com/stowball/webpack-svg-icon-system
A loader and plugin for webpack that converts all your SVGs into symbols and merges them into a SVG sprite.
https://github.com/stowball/webpack-svg-icon-system
icon javascript svg webpack
Last synced: about 1 year ago
JSON representation
A loader and plugin for webpack that converts all your SVGs into symbols and merges them into a SVG sprite.
- Host: GitHub
- URL: https://github.com/stowball/webpack-svg-icon-system
- Owner: stowball
- License: mit
- Created: 2017-02-28T04:00:58.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-04-25T11:18:17.000Z (about 7 years ago)
- Last Synced: 2025-04-12T04:09:37.047Z (about 1 year ago)
- Topics: icon, javascript, svg, webpack
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/webpack-svg-icon-system
- Size: 104 KB
- Stars: 10
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# webpack-svg-icon-system
[](https://badge.fury.io/js/webpack-svg-icon-system)
[](https://travis-ci.org/stowball/webpack-svg-icon-system)
A loader and plugin for webpack that converts all your SVGs into symbols and merges them into a SVG sprite.
This is a simpler fork of [Karify's external-svg-sprite-loader](https://github.com/Karify/external-svg-sprite-loader).
## Requirements
You will need NodeJS v6+, npm v3+ and webpack 2.
To make it work in older browsers, like Internet Explorer, you will also need [SVG for Everybody](https://github.com/jonathantneal/svg4everybody) or [svgxuse](https://github.com/Keyamoon/svgxuse).
## Installation
```bash
npm i webpack-svg-icon-system
```
## Options
### Loader options
- `name` - relative path to the sprite file (default: `img/sprite.svg`). The `[hash]` placeholder is supported.
- `prefix` - value to be prefixed to the icon's name (default: `icon`).
- `suffix` - value to be suffixed to the icon's name (default: `''`). The `[hash]` placeholder is supported.
- `svgoOptions` - custom options to be passed to svgo.
### Plugin options
- `emit` - determines if the sprite is supposed to be emitted (default: true). Useful when generating server rendering bundles where you just need the SVG sprite URLs but not the sprite itself.
## Usage
### Configure
If you have the following webpack configuration:
```js
// webpack.config.js
import path from 'path';
import SvgStorePlugin from 'webpack-svg-icon-system/lib/SvgStorePlugin';
module.exports = {
module: {
rules: [
{
loader: 'webpack-svg-icon-system',
test: /\.svg$/,
options: {
// override default options
},
},
],
},
output: {
path: path.resolve(__dirname, 'public'),
publicPath: '/',
},
plugins: [
new SvgStorePlugin(),
],
};
```
### Import the SVGs
Import (export) the SVGs you wish to combine in to the sprite in your JavaScript like so:
```js
export logoFacebook from './assets/svg/icons/logo-facebook.svg';
export logoInstagram from './assets/svg/icons/logo-instagram.svg';
```
### Add your sprite to the DOM
```js
(function(path, baseUrl) {
var id = 'svg';
var xhr = new XMLHttpRequest;
var body = document.body;
var div = document.createElement('div');
var base = baseUrl || window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
var url = base + path;
if (div.id = id, body.insertBefore(div, body.childNodes[0]), 'withCredentials' in xhr) {
xhr.withCredentials;
xhr.open('GET', url, true);
}
else {
if (typeof XDomainRequest == 'undefined') {
return void(body.className += ' no-svg');
}
xhr = new XDomainRequest;
xhr.open('GET', url);
}
xhr.onload = function() {
div.className = 'u-visually-hidden';
div.innerHTML = xhr.responseText;
};
xhr.onerror = function() {
body.className += ' no-svg';
};
setTimeout(function() {
xhr.send();
}, 0);
})('/img/sprite.svg');
```
### in your markup
```html
```
## Contributing
First of all, **thank you** for contributing, **you are awesome**.
Here are a few rules to follow in order to ease code reviews, and discussions before maintainers accept and merge your work:
- Make sure your commit messages make sense (don't use `fix tests`, `small improvement`, `fix 2`, among others).
- Before creating a pull request make sure of the following:
- your code is all documented properly;
- your code passes the ESLint rules;
- variable, function and class names are explanatory enough;
- code is written in ES2015.
- When creating a pull request give it a name and description that are explanatory enough. In the description detail everything you are adding, do not assume we will understand it from the code.
Thank you!
---
Copyright (c) 2017 [Matt Stow](http://mattstow.com)
Licensed under the MIT license *(see [LICENSE](https://github.com/stowball/react-accessible-tabs/blob/master/LICENSE) for details)*