More of a question.

[michaelmano]

So Im new to webpack2 and used to use svgstore with gulp. Im just wondering if anyone is able to provide assistance with getting a basic setup running.

So far I have my webpack with es6 and scss working fine and the way I want it. I have been trying to get svgstore working with it however not coming up with any luck. I have looked over the example and still cant figure it out.

I want to be able to dump a bunch of svgs into a folder, I want webpack to then pick them up and compile them into a single svg and dump it out into the output folder core/lib/web/

here is my webpack.conf.js

let webpack = require('webpack'),
    path = require('path'),
    ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './src/entry.js',
    output: {
        filename: 'js/app.js',
        path: path.resolve(__dirname, 'core/lib/web/')
    },
    devtool: 'cheap-module-source-map',
    module: {
        rules: [{
            test: /\.js$/,
            loader: 'babel-loader?presets[]=es2015'
        }, {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                use: [
                    'css-loader',
                    'sass-loader'
                ],
                fallback: 'style-loader'
            })
        }]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'css/app.css',
            allChunks: true
        })
    ]
};

and my entry.js

import './scss/styles.scss';
import './js/app';

[jarodtaylor]

Yeah, their docs aren't very helpful at all. I'm having issues as well.

[alexiscordova]

@michaelmano I was in a similar boat (coming originally from grunt-svgstore and then gulp-svgstore), but this is how I got this plugin to work:

As an FYI, I exported my icons from Sketch with the SVGO Compressor plugin (https://github.com/BohemianCoding/svgo-compressor), so I'm not doing any SVGO options in my webpack.config.js. I highly recommend this approach. Also, I'm doing this in React, but it might not matter.

First, require the plugin in your webpack.config.js as you normally would (I use const and single-line declarations, but it's up to you):

let webpack = require('webpack'),
  path = require('path'),
  ExtractTextPlugin = require('extract-text-webpack-plugin'),
  SvgStore = require('webpack-svgstore-plugin');

Second, instantiate the plugin:

plugins: [
  new ExtractTextPlugin({
    filename: 'css/app.css',
    allChunks: true
  }),

  new SvgStore({
    prefix: `PREFIX-`
  })
]

Note: My icons are automatically exported with their prefix added, but I ran into an error when I didn't make the declared prefix an empty string (e.g., prefix: ''), which seems like a bug to me.

This is where I think the documentation gets confusing. I put the following in my main wrapper .jsx file, not in webpack.conf.js:

const __svg__ = {
  path: 'relative/path/to/svgs/*.svg',
  name: 'relative/path/to/destination/filename.svg'
}

require('webpack-svgstore-plugin/src/helpers/svgxhr')(__svg__)

In your case, the name value would be 'core/lib/web/[filename.svg]'. You can use [hash] to add a hash to your filename (for cache busting), but there might be a bug in this (#141).

From there, you'd declare your SVGs using the syntax you're used to from the Gulp plugin:

<svg>
  <use xlink:href="#PREFIX-name"></use>
</svg>

Make sure to use the prefix you declared in your webpack.config.js, if you declared one.

Run your build and you should be good to go.

[michaelmano]

Thanks all for the help. I managed to figure it out in the end. was just a bit a mission what i just ended up doing was first in my webpack.config.js

var SvgStore = require('webpack-svgstore-plugin');
plugins: [
        new SvgStore.Options({
            svgoOptions: {
                plugins: [
                    { removeTitle: true }
                ]
            }
        })
    ]

then in my entry

var __svg__ = { 
    path: '../svgs/**/*.svg', 
    name: 'lib/web/images/sprite.svg'
};

So with the xhr request for the svg I didnt end up using it as my urls are all over the shop (direct access to the folder is not allowed)