Faulty compiled SVG path?

I installed this plugin then added this to my webpack plugins

webpack.config

                {
                    test: /\.(jpe?g|png|gif|svg)$/i,
                    loaders: [
                        'file?hash=sha512&digest=hex&name=[hash].[ext]',
                        'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
                    ]
                },

now I have one entry point app.js

require('styles/icons')

styles/icons.scss whose content is

@each $keyword in 'fn', 'dn' {
  @each $color-keyword in 'red', 'white' {

    .icon--#{$keyword}--#{$color-keyword} {
      background: url("../svg/icon--#{$keyword}--#{$color-keyword}.svg") no-repeat left top;
      background-size: contain;
    }

    .svg-off .icon--#{$keyword}--#{$color-keyword} {
      background-image: url("../images/icon--#{$keyword}--#{$color-keyword}.png");
    }
  }
}

This compiles fine and when I load my webpage I see

.icon--fn--red {
  background: url(/assets/6e4ae90369b7deca283f326cdb52060e.svg) no-repeat left top;
  background-size: contain;
}

But then I look at that file /assets/6e4ae90369b7deca283f326cdb52060e.svg and I see

module.exports = __webpack_public_path__ + "695fb5da0124fe2dd0c33bab5f22f59e.svg"

I checked the file 695fb5da0124fe2dd0c33bab5f22f59e.svg and it points to the correct svg.

When I try to access /assets/6e4ae90369b7deca283f326cdb52060e.svg in the browser I get

This page contains the following errors:

error on line 1 at column 1: Document is empty
Below is a rendering of the page up to the first error.

How do I fix this?

[tcoopman]

If you want the font-awesome\fonts\fontawesome-webfont.svg?v=4.3.0 to be run through the image-loader you should change the test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, line to include the image-loader.

If you remove that test, the regex /\.(jpe?g|png|gif|svg)$/i won’t match webfont.svg?v=4.3.0, that’s why you get the other error when you remove that line. That also means that your initial issue has nothing to do with image-loader as the file is not run through the image-loader at all, so I’m going to close this.

I would think that your problem has something to do with how you run/access your code. How do you do that? With webpack-dev-server?

I also see that your image-loader doesn’t include svg optimization at the moment, if you want those, you need to add some svgo options. See https://github.com/tcoopman/image-webpack-loader/blob/master/test/webpack.config.js for an example.

[newtonianb]

@tcoopman thanks for the help, I fixed the regex to account for the get parameter and everything works great now.