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.

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 or svgxuse.

Installation

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:

// 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:

export logoFacebook from './assets/svg/icons/logo-facebook.svg';
export logoInstagram from './assets/svg/icons/logo-instagram.svg';

Add your sprite to the DOM

(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

<svg role="img">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-{{ name }}"/>
</svg>
 

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
Licensed under the MIT license (see LICENSE for details)