0.3.4 • Public • Published


npm version Build Status

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.


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.


npm i webpack-svg-icon-system


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.



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.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() {
  }, 0);

in your markup

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


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)


npm i webpack-svg-icon-system

DownloadsWeekly Downloads






Last publish


  • stowball