svg support about url-loader HOT 14 CLOSED

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)

from url-loader.

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

from url-loader.

Doesn't this work already?

from url-loader.

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.

from url-loader.

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?

from url-loader.

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.

from url-loader.

is it still the best solution?

from url-loader.

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.

from url-loader.

prob you are talking about webpack/webpack#595

from url-loader.

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.

from url-loader.

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

from url-loader.

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

from url-loader.

@alkema pleased to help 😊

from url-loader.

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

from url-loader.