Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    webpack-svg-icon-systempublic

    webpack-svg-icon-system

    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.

    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)

    install

    npm i webpack-svg-icon-system

    Downloadslast 7 days

    16

    version

    0.3.4

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar