mrsum / webpack-svgstore-plugin Goto Github PK

Hello!
Currently [hash] generated with buildTimestamp so every build time - hash change.

Could you suggest me how to implement long-term caching, i mean change hash if content change.

Thanks!

Hi, can you add some documentation on the proper way to use svgoOptions? I'm currently using it like this:

svgoOptions: { removeTitle: false, removeUselessStrokeAndFill: true }

But it doesn't seem to do anything. Is this the correct way to use the options?

Thanks!

Is it possible to generate multiple sprite files? I'm creating a styleguide, and it would be nice to output a sprite.html (using custom template) with all the icons.

When trying the following code

plugins: [
    new SvgStorePlugin([join(src, 'icons', '**/*.svg')],
      '',
      {
        name: 'sprite.svg',
        prefix: 'icon-',
        chunk: 'app'
      }
    ),
    new SvgStorePlugin([join(src, 'icons', '**/*.svg')],
      '',
      {
        name: 'sprite.html',
        prefix: 'icon-',
        chunk: 'app'
      }
    )
  ]

I get the following error:

/Users/jon.kvisler/Sites/github/mwng/multikanal.epi7.ultra/Web/node_modules/webpack-core/lib/ConcatSource.js:24
        return typeof item === "string" ? item : item.source();
                                                     ^

TypeError: Cannot read property 'source' of undefined
    at /Users/jon.kvisler/Sites/github/mwng/multikanal.epi7.ultra/Web/node_modules/webpack-core/lib/ConcatSource.js:24:48
    at Array.map (native)
    at ConcatSource.source (/Users/jon.kvisler/Sites/github/mwng/multikanal.epi7.ultra/Web/node_modules/webpack-core/lib/ConcatSource.js:23:23)
    at Compiler.writeOut (/Users/jon.kvisler/Sites/github/mwng/multikanal.epi7.ultra/Web/node_modules/webpack/lib/Compiler.js:256:26)
    at Compiler.<anonymous> (/Users/jon.kvisler/Sites/github/mwng/multikanal.epi7.ultra/Web/node_modules/webpack/lib/Compiler.js:246:20)
    at /Users/jon.kvisler/Sites/github/mwng/multikanal.epi7.ultra/Web/node_modules/async/lib/async.js:181:20
    at Object.async.forEachOf.async.eachOf (/Users/jon.kvisler/Sites/github/mwng/multikanal.epi7.ultra/Web/node_modules/async/lib/async.js:233:13)
    at Object.async.forEach.async.each (/Users/jon.kvisler/Sites/github/mwng/multikanal.epi7.ultra/Web/node_modules/async/lib/async.js:209:22)
    at Compiler.emitFiles (/Users/jon.kvisler/Sites/github/mwng/multikanal.epi7.ultra/Web/node_modules/webpack/lib/Compiler.js:235:20)
    at /Users/jon.kvisler/Sites/github/mwng/multikanal.epi7.ultra/Web/node_modules/mkdirp/index.js:48:26
    at FSReqWrap.oncomplete (fs.js:82:15)

It works fine with one instance.

Btw, great project 💯

How would you combine this package with Webpack Dev Server?

My webpack-dev-server is running on port 3001.
My public app is running on port 3000.

My Publicpath is configured to a host + port so the Ajax request to the file looks like http://localhost:3000/http://localhost:3001/dist/icons/sprite.svg

I can rewrite basePath to http://localhost:3001 but then you get a request to http://localhost:3001/http://localhost:3001/dist/icons/sprite.svg

When I run a build in production mode manually (no webpack-dev-server) the publicPath is set to 'dist' and everyhing works okay.

Maybe the package could accept an override function so the publicPath does not automatically get injected into the url string?

usage code:

import svgxhr from 'webpack-svgstore-plugin/src/helpers/svgxhr';
import React, { PropTypes } from 'react';

const __svg__ = {
  path: './svg/**/*.svg',
  name: '/images/svg/[hash].icon.svg'
};

svgxhr(__svg__);

Network panel on dev tools and server shows:

/images/svg/[hash].icon.svg 500 14.228 ms - -

Got the svg sprite generated and I can see it served on webpack dev server.

But how do I configure svgxhr.js to load the sprite dynamically (using the unique hash). I don't understand where this gets served from?

from README:

2. Include svgxhr.js into your webpage

 <script src="/assets/svgxhr.js" type="text/javascript" charset="utf-8"></script>

This step just isn't working for me.

I've been trying to use 'entry' options to automatically load SVG sprite on windows machine.

My publicPath is './dist'.
Webpack plugin settings are
new SvgStore("svg/icons/*/.svg", "/", { name: '[hash].sprite.svg', chunk: 'head' })

The code path.join(publicPath, filePath) from 109 line in index.js produces this code in the resulting chunk head.js:
svgXHR('\dist\8239235be0f2ba409fac873fb004346b.sprite.svg');

This causes the xhr request 404 error as the path is being read in javascript as 'dist8239235be0f2ba409fac873fb004346b.sprite.svg'.

svgo passed from 0.6.6 to 0.7.0 10 days ago, could we use it in webpack-svgstore-plugin ?

What does "add xhr to entry chunk" mean?

Thank you.

When assetsPublicPath in webpack isnt "/", module not add it to svg url in xhr

There is a block of code in svgxhr.js...

if (typeof XDomainRequest !== 'undefined') {
    _ajax = new XDomainRequest();
}

With that in source code my icons won't load in IE9 and IE10. _ajax.onerror throws error but there is no error message, so I don't know why it doesn't work.
But! When I commented this out, icons appeared! IE9 can use XMLHttpRequest as well.

As far as I know, XDomainRequest is some kind of sub-standard introduced by MS years ago. Do you really need that in this file? It seems, that it brokes loading SVG on old IE...

Any help, guys?

I use nginx to server my files and I run IE9 on VirtualBox (I work on Ubuntu 16.04), if that matters.

get this issue

new to svgstore and webpack, so guess it's me :-), but don't know where to look for

Unhandled rejection TypeError: Object # has no method 'isAbsolute'
at Compiler. ...node_modules\webpack-svgstore-plugin\index.js:70:25)
at Compiler.next ....node_modules\webpack\node_modules\tapable\lib\Tapable.js:69:14)
at ...node_modules\html-webpack-plugin\index.js:189:9
at process._tickCallback (node.js:419:13)
From previous event:

thx for your help

if webpack in watch mode or use webpack-dev-server this plugin not add svgxhr to chunk.

I suggest rewrite svgxhr.js to commonJs style. So I could require in my code.

var svgxhr = require('webpack-svgstore-plugin/helpers/svgxhr.js');
svgxhr('/build/sprite.svg');

As for version 3.0.3 there is a problem with resolving sprite paths at runtime.
It is necessary to consider webpack's public path at runtime to build a proper url for current runtime environment. The path can be accessed as __webpack_public_path__ in the chunk entry file.

It is the case when the asset path is not known statically (at build time) rather at runtime.

This #106 may be related issue, but it is not about webpack, but some plugin (vuejs loader i guess). Because webpack does not have assetsPublicPath.

I have app which is embedded into page for some path let's say http://some.domain.com/blablabla/app.
When I use webpack-svgstore-plugin it creates svgXHR which is relative to some.domain.com (and possibly port), i.e. http://some.domain.com/images/sprite.svg. Is there any way to make it relative to path part of location (i.e. http://some.domain.com/blablabla/app/images/sprite.svg)? If no, I think it should be easy to implement by adding location.pathname here based on some option.

Hi, guys! I noticed, that after adding svgstore-plugin build time in my project increased from 9sec. to 29sec. It seems that the root of problem that plugin uses compilation event here
But if you use extract-text-webpack-plugin in your project this events will fire several times and it leads to multiple run svgstore-plugin
How can we fix this problem? use 'emit' event (it works for me, btw)? add caching?
demo repo

Given that the webpack output.publicPath is set to something like 'http://hostname:port/path/', and baseUrl is set to '', currently results in the svgXHR trying to access '/http://hostname:port/path/sprite.svg'. Instead the leading slash should only be present when a baseUrl is provided.

https://github.com/mrsum/webpack-svgstore-plugin/blob/develop/helpers/utils.js#L131 should be

viewBox: dom.attribs.viewbox

http://www.w3.org/TR/SVG/styling.html#CaseSensitivity

I'm using webpack dev server for JS and CSS, but I'd like to output the SVG sprite generated by SvgStore to the file system. It works fine with normal webpack, but with the dev server I'm unable to find a way to do it. Is this even possible? Or does SvgStore only do in-memory output with the dev server?

We keep running into a probem with svgXHR occasionally throwing the following error:

Uncaught TypeError: Cannot read property 'insertBefore' of null

And here's the culprit:

document.addEventListener('DOMContentLoaded', svgXHR('hash', 'dir'), false);

According to MDN:

target.addEventListener(type, listener[, useCapture]);
listener
The object that receives a notification when an event of the specified type occurs. This must be an object implementing the EventListener interface, or simply a JavaScript function.

The code above should be:

document.addEventListener('DOMContentLoaded', function() { svgXHR('hash', 'dir'); }, false);

Sorry to write again. This time I noticed the bug with the path happening at this line of code:
_ajax.open('GET', baseUrl + '/' + url, true);

It means that if I use smth like this with webpack
new SvgStore(
        path.resolve("svg/src/*/.svg"),
        "/dist",
        {
name: 'svg.sprite.svg',
prefix: 'icon-',
chunk: 'headscripts',
baseUrl: "/assets"
}))
then I'm getting svg.sprite.svg inside the dist folder and ajax request to the
baseUrl + '/' + url = "/assets" + "/" + "/dist/svg.sprite.svg" = "/assets//dist/svg.sprite.svg"
path.

In this case "/dist" might be a wrong option, of course (but how else can I put the sprite exactly to the dist folder anyway?). But if I use this code with webpack-dev-server with publicPath="/assets/dist/" in my webpack config file and
new SvgStore(
      path.resolve("svg/src/*/.svg"),
      "",
      {
name: 'svg.sprite.svg',
prefix: 'icon-',
chunk: 'headscripts',
baseUrl: "http://localhost:8080"
}
then I'm getting this line of code in the resulting headscripts file:
document.addEventListener('DOMContentLoaded', svgXHR('/assets/dist/svg-icons.sprite.svg', 'http://localhost:8080'), false);

Which again leads us to
baseUrl + '/' + url = "http://localhost:8080" + "/" + "/assets/dist/svg-icons.sprite.svg" = "http://localhost:8080//assets/dist/svg-icons.sprite.svg"

If I provide a baseUrl as an empty string in this case, then I'm getting a totally invialid path
"//assets/dist/svg-icons.sprite.svg";

Despite the fact that IIS handles paths with doube slash as normal path and files are avaliable to the ajax request, this is still a problem because it's not a consistent behaviour.

I believe "/" should only be added for the cases when baseUrl is undefined, to avoid such confusion to happen with paths.

tl;dr Having plugin enabled breaks webpack builds somwhere in webpack-core/lib/ConcatSource.js

> npm install --save-dev webpack

This installs webpack 1.13.1

Given the following webpack.config:

var SvgStore = require('webpack-svgstore-plugin');

var config = {
    entry:   {
        app: [
            '/soma-file.js'
        ],
        lib: [
            'lodash'
        ]
    },
    output:  {
        path:              '/path',
        filename:          filename
    },
    module:  {
        loaders: [
            {
                test:   /\.js$/,
                loader: 'babel',
                query:  {
                    presets: ['es2015', 'stage-0', 'react'],
                    compact: false
                }
            },
            {
                test:   /\.json$/,
                loader: 'json'
            }
        ]
    },
    plugins: [
        new SvgStore(path.join('./img/svg', '', '**!/!*.svg'), path.join('./', ''), {
            name:        '[hash].sprite.svg',
            chunk:       'app',
            prefix:      'pref-',
            baseUrl:     '/my-url',
            svgoOptions: {}
        }),
        new webpack.optimize.CommonsChunkPlugin("lib", "lib.js", Infinity)
    ],
    bail:    false,
    target:  'web'
};

Trying to run this results in:

/node_modules/webpack-core/lib/ConcatSource.js:24
        return typeof item === "string" ? item : item.source();
                                                     ^

TypeError: Cannot read property 'source' of undefined
    at /node_modules/webpack-core/lib/ConcatSource.js:24:48
    at Array.map (native)
    at ConcatSource.source (/node_modules/webpack-core/lib/ConcatSource.js:23:23)
    at Compiler.writeOut (/node_modules/webpack/lib/Compiler.js:256:26)
    at Compiler.<anonymous> (/node_modules/webpack/lib/Compiler.js:246:20)
    at /node_modules/async/lib/async.js:181:20
    at Object.async.forEachOf.async.eachOf (/node_modules/async/lib/async.js:233:13)
    at Object.async.forEach.async.each (/node_modules/async/lib/async.js:209:22)
    at Compiler.emitFiles (/node_modules/webpack/lib/Compiler.js:235:20)
    at /node_modules/mkdirp/index.js:48:26
    at FSReqWrap.oncomplete (fs.js:82:15)

Will report this to webpack as well, could be a problem on their side: see webpack/core#24

Since SVGXHR code is added during the emit compiler phase, the resulting chunkhash stays the same.

Given dummy.js that is blank, and the following setup:

entry: {
    'common': ['babel-core/external-helpers', 'babel/polyfill', 'react', 'lodash'],
    'svg': ['./app/helpers/dummy.js'],
    'app': ['./app/Boot.jsx']
  },
...
output: {
    publicPath: '/',
    path: path.resolve('./dist'),
    filename: '[name].[chunkhash].js',
    sourceMapFilename: '[file].map'
  },
...
new SvgStore(path.join('app/assets', 'svg', '**/*.svg'), '', {
      prefix: '',
      name: 'sprite.'+ version +'.svg',
      chunk: 'svg',
      svgoOptions: { plugins: require('./svgo.js').constants.plugins() }
    }),

The resulting filename is always identical.

When plugin is used with "chunk" option, then _ajax.onload callback from Svgxhr.js sometimes doesn't fire in the resulting chunk. I believe the reason is _ajax.send(); should be called after _ajax.onload is attached.
This happens always when used with webpack-dev-server (I proxy my local website to localhost:8080 and my Access-Control-Allow-Origin headers are set correctly).

Also would be great to have an option to use only XMLHttpRequest even if XDomainRequest is supported (why not, if the files are stored locally).

If I'm using the webpack-dev-server with HMR (hot module replacement) and this plugin with the chunk option a new div gets created every time I change something.
This leads to a couple of hundred SVG stores. Not critical in production but in development it slows down the browser extremely at some point.

I recently migrated our grunt/browserify/grunt-svgstore project to webpackge/webpack-svgstore-plugin.

Everything is working great, except that the animations that we previously embedded in to our SVGs no longer animate. The initial SVG renders and then no movement.

It appears as if something is happening to the SVG structure after it is run through the svgstore plugin. Here is the source SVG file:

<svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title desc" role="img" fill="AAAAAA">
    <title>
        Loading Spinner Animated
    </title>
    <desc>
        This is an animated loading spinner, all animation is within the SVG.
    </desc>
    <path d="M5.386 19.817c-.584 4.44.595 8.84 3.32 12.39 5.628 7.333 16.172 8.722 23.504 3.095 7.332-5.628 8.72-16.173 3.093-23.504-3.57-4.65-9.406-7.12-15.238-6.447-.264.028-.51-.16-.54-.428-.03-.267.16-.51.43-.54 6.166-.707 12.345 1.902 16.12 6.822 5.956 7.76 4.488 18.917-3.27 24.87-3.215 2.467-7.01 3.66-10.78 3.66-5.33 0-10.604-2.385-14.092-6.932C5.048 29.042 3.8 24.386 4.42 19.69c.595-4.532 2.86-8.578 6.392-11.447H5.57c-.27 0-.488-.22-.488-.488 0-.27.218-.488.487-.488h6.678c.27 0 .488.218.488.488v6.68c0 .27-.218.487-.488.487s-.488-.217-.488-.488V8.737c-3.53 2.724-5.792 6.657-6.374 11.08z">
        <animateTransform
                attributeName="transform"
                type="rotate"
                from="0 22 22"
                to="360 22 22"
                dur="3s"
                repeatCount="indefinite" />
    </path>
</svg>

Previously this was creating a an SVG store that looked this using https://github.com/FWeinb/grunt-svgstore:

<svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" style="display: none;" cleanup="true">
    <symbol role="img" aria-labelledby="title desc" viewBox="0 0 44 44" id="icon-loading-animated">
        <title>Loading Spinner Animated</title>
        <desc>This is an animated loading spinner, all animation is within the SVG.</desc>
        <path d="M5.386 19.817c-.584 4.44.595 8.84 3.32 12.39 5.628 7.333 16.172 8.722 23.504 3.095 7.332-5.628 8.72-16.173 3.093-23.504-3.57-4.65-9.406-7.12-15.238-6.447-.264.028-.51-.16-.54-.428-.03-.267.16-.51.43-.54 6.166-.707 12.345 1.902 16.12 6.822 5.956 7.76 4.488 18.917-3.27 24.87-3.215 2.467-7.01 3.66-10.78 3.66-5.33 0-10.604-2.385-14.092-6.932C5.048 29.042 3.8 24.386 4.42 19.69c.595-4.532 2.86-8.578 6.392-11.447H5.57c-.27 0-.488-.22-.488-.488 0-.27.218-.488.487-.488h6.678c.27 0 .488.218.488.488v6.68c0 .27-.218.487-.488.487s-.488-.217-.488-.488V8.737c-3.53 2.724-5.792 6.657-6.374 11.08z">
            <animateTransform attributeName="transform" type="rotate" from="0 22 22" to="360 22 22" dur="3s"
                              repeatCount="indefinite"/>
        </path>
    </symbol>
</svg>

Using the webpack-svgstore-plugin the generated SVG looks like this:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;" viewBox="0 0 44 44" cleanup="false">
<symbol viewBox="0 0 44 44" id="icon-loading-animated">
    <desc>This is an animated loading spinner, all animation is within the SVG.</desc>
    <path d="M5.386 19.817c-.584 4.44.595 8.84 3.32 12.39 5.628 7.333 16.172 8.722 23.504 3.095 7.332-5.628 8.72-16.173 3.093-23.504-3.57-4.65-9.406-7.12-15.238-6.447a.487.487 0 0 1-.11-.967c6.166-.706 12.345 1.903 16.12 6.823 5.956 7.76 4.488 18.917-3.27 24.87a17.648 17.648 0 0 1-10.78 3.66c-5.33 0-10.604-2.385-14.092-6.932A17.615 17.615 0 0 1 4.42 19.69a17.61 17.61 0 0 1 6.392-11.447H5.57a.49.49 0 0 1 0-.976h6.677c.27 0 .488.218.488.488v6.68c0 .27-.218.487-.488.487s-.488-.217-.488-.488V8.737a16.645 16.645 0 0 0-6.376 11.08z"></path>
    <animateTransform attributeName="transform" type="rotate" from="0 22 22" to="360 22 22" dur="3s"
                      repeatCount="indefinite"></animateTransform>
</symbol>
</svg>

As you can see the animateTransform element has been moved to a sibling of the path element.

Here is the config in webpack.config.js:

{
    ...
        plugins: [
            new SvgStore( path.join( 'app', 'svg', '*.min.svg' ), path.join( '..', 'svg' ), {
                name: 'concierge-icons.svg',
                svg: {
                    viewBox: '0 0 44 44',
                    style: 'display: none;',
                    cleanup: 'false'
                }
            } ),
    ...
}

Am I doing something obviously wrong?

Is there a barebones sample app someplace? I'm having trouble getting it to build a sprite.svg even after going through the documentation. I'm sure it's some small little thing I'm doing wrong but it would be nice if there was a simple working app I could start from.

I have setup similar to https://github.com/cngroupdk/hands-on-flexbox-svg/blob/master/webpack.config.js#L25

new SvgStore(path.join(__dirname, 'svg-source', '**/*.svg'), path.join('sprites'), {
  name: '[hash].sprite.svg',
  chunk: 'app',
  prefix: 'icon-'
})

in my case it is:

new SvgStore('bower_components/uirepo/frontend/icons/*.svg', path.join('icons'), {
  name: '[hash].icons.svg',
  chunk: 'app',
  prefix: ''
})

In both cases, I get empty folder created (sprites/ and icons/).

I know it could be avoided, by using:

-    new SvgStore(path.join(__dirname, 'svg-source', '**/*.svg'), path.join('sprites'), {
+    new SvgStore(path.join(__dirname, 'svg-source', '**/*.svg'), path.join('svg-source'), {

But with bower_components this is not possible.

How can we improve it so webpack-svgstore-plugin is not creating that empty directory?

Please could you elaborate on the Code Samples to show what else needs to be added to a project to build and make use of the resulting sprite file?
Where does the sprite file end up? How would you bundle it into the page?
The Plugin code is clearly illustrated but is more needed, such as defining a Loader?
Many thanks

When I try to set symbol: {viewBox: '0 0 100 100'} in the SvgStore options, no changes occur with the symbol's viewBox attribute. If, however, I edit helpers/utils.js such that viewBox: dom.attribs.viewBox is changed to viewBox: dom.attribs.viewbox (removing the capitalization) the problem goes away. Is this an issue that can be resolved in a subsequent release? And does there currently exist some kind of workaround that doesn't involve changing the package or the utils helper file?

Thank you!

As ConcatSource is not part of Webpack2, this fails when the plugin is trying to resolve webpack/lib/ConcatSource.

Not seeing the file generated when running webpack dev server. How would I setup an import path into a sass file? Do I need an additional loader?

Hi,
I'm having a problem with the plugin in terms of the svgoOptions integration.
I'm using version 3.0.3 of the plugin.

This is the configuration I've for the plugin:

{
  svg: {
    style: 'display: none;'
  },
  // All the svgo options are taken from here: https://github.com/svg/svgo#what-it-can-do
  svgoOptions: {
    plugins: [
     { removeXMLNS: true } // Changed from default of `false`
    ]
  }
}

My end result svg file looks like this:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none"><symbol viewBox="0 0 18 18" id="icon-delete"><g transform="translate(2 1)" fill="currentColor" fill-rule="evenodd"><path d="M4 2h5V1H4v1zm9 0h-3V1a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v1H0v1h1.072L1 14c0 1 1 2 2 2h7c1 0 2-1 2-2l-.07-11H13V2zm-2 13H2V3h9v12z"></path><rect x="6" y="5" width="1" height="8" rx=".5"></rect></g></symbol><symbol viewBox="0 0 18 18" id="icon-duplicate"><g fill="currentColor" fill-rule="evenodd"><path d="M5 3V2c0-.552.456-1 1.002-1h9.994c.554 0 1.003.456 1.003 1.002v9.996a1 1 0 0 1-1 1.002h-1v-1h1V2h-10v1"></path><path d="M3 14.998c0-.003 9.997.002 9.997.002-.002 0 .003-9.998.003-9.998C13 5.005 3.003 5 3.003 5L3 14.998zM3.003 4h9.994C13.551 4 14 4.456 14 5.002v9.996c0 .553-.456 1.002-1.003 1.002H3.003A1.007 1.007 0 0 1 2 14.998V5.002C2 4.45 2.456 4 3.003 4z"></path></g></symbol><symbol viewBox="0 0 18 18" id="icon-edit"><g fill="currentColor" fill-rule="evenodd"><path d="M3 13v3l-1-1h3l-.707.293 11-11v1.414l-3-3h1.414l-11 11L3 13zm-1 0L13 2l3 3L5 16H2v-3z"></path><path d="M11 4.707L11.707 4l2.12 2.12-.706.708z"></path></g></symbol><symbol viewBox="0 0 16 16" id="icon-instances"><g fill="currentColor" fill-rule="evenodd"><path d="M12.985 12h1.007C14 12 14 2.002 14 2.002 14 2.005 4.002 2 4.002 2L4 2.99H3v-.994C3 1.446 3.456 1 4.002 1h9.996C14.55 1 15 1.456 15 2.002v9.996C15 12.55 14.553 13 13.992 13h-1.007v-1z"></path><path d="M13 8v5.997C13 14.55 12.544 15 11.998 15H2.002A1.007 1.007 0 0 1 1 13.998V4.002C1 3.45 1.453 3 1.997 3H9v1H2v9.998L12 14V8"></path><path d="M6.545 11.41l.41.59.432-.577L12.5 4.57 11.668 4l-5.113 6.854.84.013L5.352 7.93l-.85.543z"></path></g></symbol><symbol viewBox="0 0 16 16" id="icon-items"><g fill="currentColor" fill-rule="evenodd"><path d="M1 13.993c0 .005 11.993.007 11.993.007C12.997 14 13 1.007 13 1.007 13 1.002 1.007 1 1.007 1 1.003 1 1 13.993 1 13.993zM1.007 0h11.986C13.55 0 14 .45 14 1.007v12.986C14 14.55 13.55 15 12.993 15H1.007C.45 15 0 14.55 0 13.993V1.007C0 .45.45 0 1.007 0z"></path><path d="M4 4h6v1H4zm0 3h6v1H4zm0 3h6v1H4z"></path></g></symbol><symbol viewBox="0 0 20 32" id="icon-modal_arrow_right"><path d="M13.779 16.5L2.45 5.56c-.6-.585-.6-1.535 0-2.12a1.563 1.563 0 0 1 2.173 0L18 16.5 4.623 29.56c-.6.586-1.573.586-2.173 0-.6-.585-.6-1.535 0-2.12L13.779 16.5z" fill="#FFF" fill-rule="evenodd"></path></symbol><symbol viewBox="0 0 20 20" id="icon-modal_close"><path d="M10 8.586L2.224.81A1 1 0 1 0 .81 2.224L8.586 10 .81 17.776a1 1 0 1 0 1.414 1.414L10 11.414l7.776 7.776a1 1 0 1 0 1.414-1.414L11.414 10l7.776-7.776A1 1 0 1 0 17.776.81L10 8.586z" fill="#FFF" fill-rule="evenodd"></path></symbol><symbol viewBox="0 0 16 4" id="icon-more"><g transform="rotate(90 8 8)" fill="currentColor" fill-rule="evenodd"><circle cx="2" cy="2" r="2"></circle><path d="M2 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path><circle cx="2" cy="14" r="2"></circle></g></symbol></svg>

As you can see, I still have xmlns attributes in my generated symbols..
I do know that the plugin is working since my app is running + you can see int he result svg that we have the icon- prefix in the ids..

Any reason why is that?

P.S:
My actual configuration I have has more plugins.. But even the simple configuration with only removeXMLNS isn't working for me.. Here is the full configuration I have:

{
  svg: {
    style: 'display: none;'
  },
  // All the svgo options are taken from here: https://github.com/svg/svgo#what-it-can-do
  svgoOptions: {
    plugins: [
      { cleanupAttrs: true },
      { removeDoctype: true },
      { removeXMLProcInst: true },
      { removeComments: true },
      { removeMetadata: true },
      { removeTitle: true }, // Changed from default of `false`
      { removeDesc: true },
      { removeUselessDefs: true },
      { removeXMLNS: true }, // Changed from default of `false`
      { removeEditorsNSData: true },
      { removeEmptyAttrs: true },
      { removeHiddenElems: true },
      { removeEmptyText: true },
      { removeEmptyContainers: true },
      { removeViewBox: false },
      { cleanUpEnableBackground: true },
      { minifyStyles: true },
      { convertStyleToAttrs: true },
      { convertColors: true },
      { convertPathData: true },
      { convertTransform: true },
      { removeUnknownsAndDefaults: true },
      { removeNonInheritableGroupAttrs: true },
      { removeUselessStrokeAndFill: true },
      { removeUnusedNS: true },
      { cleanupIDs: true },
      { cleanupNumericValues: true },
      { cleanupListOfValues: true },
      { moveElemsAttrsToGroup: true },
      { moveGroupAttrsToElems: true },
      { removeRasterImages: false },
      { mergePaths: true },
      { convertShapeToPath: true },
      { sortAttrs: false },
      { transformsWithOnePath: false },
      { removeDimensions: true }, // Changed from default of `false`
      { removeAttrs: false },
      { removeElementsByAttr: false },
      { addClassesToSVGElement: false },
      { addAttributesToSVGElement: false },
      { removeStyleElement: false }
    ]
  }
}

I might be missing something obvious here, but for me, the plugin never emits the actual sprite.

The output:

                                                 Asset     Size  Chunks             Chunk Names
/Users/jorum/Dev/project/src/assets/img/svg-sprite.svg  39.9 kB          [emitted]
                                                app.js   520 kB       0  [emitted]  app

Using this configuration:

new SvgStore(path.join(sourcePath, 'assets/img/icons/**/*.svg'), path.join(sourcePath, 'assets/img'), {
  name: 'svg-sprite.svg',
  chunk: 'app'
})

Is this a bug or am I just doing something wrong?

In dev mode they are being inlined and i can reference like so

In production I can see them inlined in the template, but they do not show

The SVGO optimizations are toooo good and they are causing some round icons to become appear malformed.

Have you seen this issue before and/or do you have any suggestions on how to fix?

Thanks for the awesome plugin btw!

For reference, this is the SVG before minification which appears correct in browsers until ran through SVGO

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<g id="guides">
</g>
<g id="white">
</g>
<g id="_x31_6_16" display="none">
</g>
<g id="content">
    <path d="M8,13c1.7546387,0,3.451416-0.3748779,5-1.0852051v1.0881348C11.4607544,13.6448975,9.7719116,14,8,14
    s-3.4607544-0.3551025-5-0.9970703v-1.0881348C4.548584,12.6251221,6.2453613,13,8,13z M8,2
    C5.2386475,2,3.0001221,4.2385254,3,6.9997559v3.2355957c0.3233643,0.175293,0.6572876,0.3337402,1,0.4750977V6.9997559
    C4.0001221,4.7941895,5.7944946,3,8,3c2.2055664,0,3.9998779,1.7941895,4,3.9997559v3.7106934
    c0.3427124-0.1413574,0.6766357-0.2998047,1-0.4750977V6.9997559C12.9998779,4.2385254,10.7613525,2,8,2z M8,12
    c0.1676636,0,0.3342285-0.0043945,0.5-0.0118408V8.4082031C9.0812378,8.2016602,9.5,7.6520996,9.5,7
    c0-0.8283691-0.6715698-1.5-1.5-1.5S6.5,6.1716309,6.5,7c0,0.6520996,0.4187622,1.2016602,1,1.4082031v3.5799561
    C7.6658325,11.9956055,7.8323975,12,8,12z"/>
</g>
<g id="grid">
</g>
</svg>

Here is what the icon looks like before ran through svgo:

The paths of the SVG before and after

// before SVGO
M8,13c1.7546387,0,3.451416-0.3748779,5-1.0852051v1.0881348C11.4607544,13.6448975,9.7719116,14,8,14   s-3.4607544-0.3551025-5-0.9970703v-1.0881348C4.548584,12.6251221,6.2453613,13,8,13z M8,2   C5.2386475,2,3.0001221,4.2385254,3,6.9997559v3.2355957c0.3233643,0.175293,0.6572876,0.3337402,1,0.4750977V6.9997559   C4.0001221,4.7941895,5.7944946,3,8,3c2.2055664,0,3.9998779,1.7941895,4,3.9997559v3.7106934   c0.3427124-0.1413574,0.6766357-0.2998047,1-0.4750977V6.9997559C12.9998779,4.2385254,10.7613525,2,8,2z M8,12   c0.1676636,0,0.3342285-0.0043945,0.5-0.0118408V8.4082031C9.0812378,8.2016602,9.5,7.6520996,9.5,7   c0-0.8283691-0.6715698-1.5-1.5-1.5S6.5,6.1716309,6.5,7c0,0.6520996,0.4187622,1.2016602,1,1.4082031v3.5799561   C7.6658325,11.9956055,7.8323975,12,8,12z

// After SVGO (malformed circle)
M8 13c1.755 0 3.451-.375 5-1.085v1.088c-1.54.642-3.228.997-5 .997s-3.46-.355-5-.997v-1.088A11.963 11.963 0 0 0 8 13zM8 2a5 5 0 0 0-5 5v3.235c.323.176.657.334 1 .475V7c0-2.206 1.794-4 4-4s4 1.794 4 4v3.71c.343-.14.677-.3 1-.475V7a5 5 0 0 0-5-5zm0 10c.168 0 .334-.004.5-.012v-3.58A1.496 1.496 0 0 0 8 5.5a1.496 1.496 0 1 0-.5 2.908v3.58c.166.008.332.012.5.012z

I have an issue specifically with version 2.1.3 when using Webpack-svgstore-plugin in my webpack build I'm getting a file path added to the bundle.js outputted like this:

document.addEventListener('DOMContentLoaded', svgXHR('c:/Code/Atmos/z-sample/Sample.ERP/node_modules/images/sprite.99d025b6a647b56d1279b790e94fe0fb.svg', '//localhost:81'), false);

I'm puzzled why it adds "c:/Code/Atmos/z-sample/Sample.ERP/node_modules" and is not a relative path to the output. This works in a previous version (2.1.2) until I updated the package to 2.1.3.

The sprite is placed in the correct relative folder of "wwwroot/images" in the file system. But of course my SVG is unreachable via the path supplied in the bundle.js to the svgXHR function, returning a 404 in the browser.

Here is my webpack.config.js:

var LiveReloadPlugin = require('webpack-livereload-plugin');
var SvgStore = require('webpack-svgstore-plugin');
var path = require('path');
var sourcePath = path.join('App');
var distPath = path.join('wwwroot');

module.exports = {
        entry: {
            app: './App/app.tsx'
        },

        output: {
            path: './wwwroot/',
            filename: '/js/bundle.js'
        },

        resolve: {
            extensions: ['', '.js', '.ts', '.tsx', '.svg']
        },

        devtool: 'source-map',

        plugins: [
            new LiveReloadPlugin(),
            new SvgStore(
                path.join(sourcePath, 'Images', 'icons', '*.svg'),
                'images',
                {
                    name: 'sprite.[hash].svg',
                    chunk: 'app',
                    baseUrl: '//localhost:81',
                    svgoOptions: {
                    }
                })
        ],

        tslint: {
            emitErrors: true,
            failOnHint: false
        },

        module: {
            preLoaders: [
                {
                    test: /\.ts(x?)$/,
                    loader: "tslint"
                }
            ],
            loaders: [
                {
                    test: /\.ts(x?)$/,
                    loader: 'awesome-typescript-loader'
                },
                {
                    test: /\.scss$/,
                    loader: 'style!css?sourceMap!sass?sourceMap'
                }
            ]
        }
};

After build, this plugin change id name to lowercase。
used version is '[email protected]'

to fix this add {nodir: true} to glob options,
I can create pull request, if you wish.

I know this is jumping the gun since Webpack 2 isn't stable yet, BUT given people are going to be upgrading, or testing upgrading, in the near future, it might be useful to inform devs that their spritesheets have not been created, rather than just failing in the background with no indication.

I'm running webpack-dev-server, it serves static files on http://localhost:2992/
Inside my http://localhost:2992/_assets/entry.js I have
document.addEventListener('DOMContentLoaded', svgXHR('http:/127.0.0.1:2992/_assets/build/public/svg/9fea4835cba8c510fb69ca3c6e161ec1.sprite.svg'), false);

http:/127.0.0.1:2992 is wrong, should be http://127.0.0.1:2992

I tried to upgrade from 2.x to 3.x and my webpack process no longer outputs SVG sprites. It seems like an additional assumption was added in version 3. What's the minimum that needs to occur for this plugin to produce a sprite?

Here's my very simple webpack.config.js. I'm producing a library and leaving all of the transpilation and bundling up to consumers.

const CopyWebpackPlugin = require('copy-webpack-plugin');
const SvgStore = require('webpack-svgstore-plugin');

const PATHS = {
    src: './src',
    lib: './lib'
};

const sprite = new SvgStore('./assets/svg/*.svg', './lib/svg', {
    name: 'dlssprite.svg',
    prefix: '',
    svgoOptions: {
        // options for svgo
        plugins: [
            { removeTitle: true },
            { addClassesToSVGElement: 'injected-svg' },
            { removeStyleElement: true }
        ]
    }
});

const copyToOutputDir = new CopyWebpackPlugin([{
    from: PATHS.src,
    to: PATHS.lib
}]);

module.exports = {
    output: {
        path: __dirname,
        filename: '[name].js'
    },
    module: {
        loaders: [
            {
                test: /.*/,
                loader: 'file-loader'
            }
        ]
    },
    plugins: [
        copyToOutputDir,
        sprite
    ]
};

I didn't see in docs. We have to include the sprite before use icons via xlink:href

So how do you do it?

When i use gulp, i used to use svg-inject plugin to achieve that, i inject it directly into the bottom of my html file.

Would love to be able to create my own jade template(s). Could there be an option added for that?

{
  ...,
  template: "./path/to/my/template.jade",
  ...
}

exclude option (with same behavior as in loaders) will be useful in some cases

in IE9 ./helpers/svgxhr.js XDomainRequest not run callback _ajax.onload;

if comment this code:

    // if (typeof XDomainRequest !== 'undefined') {
    //     _ajax = new XDomainRequest();
    // }

in ie9 start working loading sprite.

This plugin generate styles with proportional icon sizes?

When I start the webpack dev server everything works fine on the inital startup. All svg's get bundled correctly and I can use them in my app. But after I do a codechange and therefore trigger a recompile, the sprite.svg file doesn't get bundled and all svg icons are gone.

I initialize the SVG Store as following:

plugins.push(new SvgStore(
    path.join(__dirname, '/public/assets', '**/*.svg'), // input path
    '', // output path
    {
        name: '[hash].sprite.svg',
        chunk: 'main',
        prefix: '',
        svgoOptions: {}
    }
));

Error occurs in
if (child && child.children.length > 0) and if (child && child.attribs.id) when child lacks a children or attribs attr. This occurs (at least) when child is of type 'text'.

quick fix:
Changing the problematic lines to if (child && child.children && child.children.length > 0) and if (child && child.attribs && child.attribs.id)

Example input:

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
        /* The content of the style tag is a text-node, and will cause trouble for the _defs function. */
      .myclass {
        /* some styling */
      }
    </style>
  </defs>
  <circle class="myclass" cx="50" cy="50" r="40"/>
</svg>