Output a separate svg file

[albertogasparin]

Do you know if there is a way to extract all svg icons and save them as an SVG bundle (in order to load them on page load)?
It would be really helpful on production, instead of having all those icons bundled together with the JS file.
I've tried with Webpack ExtractTextPlugin, but I got no output.

[kisenka]

Hi @albertogasparin!
It is possible to extract sprite as separate file, but it is impossible with current ExtractTextPlugin implementation (see webpack-contrib/extract-text-webpack-plugin#85 (comment)). I plan to fork ExtractTextPlugin and implement this feature. But now I am on vacation, so be patient please :)

[albertogasparin]

Thanks @kisenka and no worries, enjoy your holiday.

[schickling]

👍

[kisenka]

Hey guys, I've added super buggy implementation of separate file creation (v0.0.21). It's just wrapper over the extract-text-webpack-plugin (you should install extract-text-webpack-plugin manually), which does not support filename placeholders yet :) It configuring right like text extract plugin:

var ExtractSVGPlugin = require('svg-sprite-loader/lib/extract-svg-plugin');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.svg$/,
        // extract=true is necessary option
        loader: ExtractSVGPlugin.extract('svg-sprite?extract=true')
      }
    ]
  },

  plugins: [
    new ExtractSVGPlugin('test.svg') // placeholders is not supported yet
  ]
};

[Craga89]

Hi @kisenka, can you detail how you'd go about using this generated file in a HTML document?

[kisenka]

@Craga89 you can load it via AJAX an inject into document. Or include it in markup after build has finished with some postprocessing.

[wmertens]

I don't understand why the svg-sprite-loader can't work like style-loader? why is the post-processing necessary?

[kisenka]

@wmertens because we need to wrap symbols string (<symbol id="a"></symbol><symbol id="b"></symbol>) with SVG declaration <svg><defs></defs></svg>.

[ShimShamSam]

Can you document the new extract option?

[AlexMost]

would be great to have this thing working. For some reason the content from css and svg are mixed in one file for me.