svg support

[talves]

I took a stab at this, but failed due to my lack of webpack knowledge.

I thought it would be great to have the limit support the svg extension mimetype (image/svg+xml)

I found this on StackOverflow

Any thoughts?

[sokra]

Doesn't this work already?

[talves]

SVG needs xml data not base64. When I configure the svg as so, it fails:
{ test: /\.svg$/, loader: "url-loader?limit=50000&name=[path][name].[ext]&context=./src" }

Maybe I am doing something wrong.

[ColCh]

Use raw-loader for inline SVG!

From config:

// module.loaders =  ...
  {
      test: /\.(svg)$/,
      loader: 'raw-loader'
    }
// ...

Usage:

var image = require('../../images/icon.svg');
var Icon = React.createClass({
  render: function () {
    return (
        <div className="Icon" dangerouslySetInnerHTML={{__html: image}} />
      );
  }
});

... how we can optimize SVG on the fly?

[talves]

Yeah, after looking at what I was doing, I realized inline SVG should not be used from url-loader and handled it with file-loader instead. @ColCh your suggestion is noted, thanks.

[iamstarkov]

is it still the best solution?

[ColCh]

Idea of using multiple loaders for SVG is far mo-o-ore good solution than just raw-loader.

Sorry mate, I can't find issue thread discussion for this.

[iamstarkov]

prob you are talking about webpack/webpack#595

[NekR]

This is what I get from url-loader for svg (decoded base64 string):

"module.exports = "<svg fill=\"#000000\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n    <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\"/>\n</svg>""

Obviously this is wrong xml document.

[NekR]

Oh, I got it, inline loader does not overrides default loader. It works, nevermind.

[alkema]

@ColCh Great idea to use raw-loader for inline SVG. 👍 Works perfectly.

[ColCh]

@alkema pleased to help 😊

[alexandrbig]

Is it possible to load some svgs inline from one folder and all others like path only?
Please help.

[iamstarkov]

@alexandrbig have two loader/ruler items with two different test regexps and different configuration

[jasongrout]

For what it's worth, in JupyterLab we're using the url-loader with a mimetype specified, like this:

{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=image/svg+xml' }

(https://github.com/jupyterlab/jupyterlab/blob/bb7f8dabc2d4a927b325ca301ee02422522b7eeb/jupyterlab/staging/webpack.config.js#L134)