New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

svg support #6

Closed
talves opened this Issue Aug 6, 2014 · 14 comments

Comments

Projects
None yet
8 participants
@talves

talves commented Aug 6, 2014

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

This comment has been minimized.

Member

sokra commented Aug 6, 2014

Doesn't this work already?

@talves

This comment has been minimized.

talves commented Aug 6, 2014

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

This comment has been minimized.

ColCh commented Nov 15, 2014

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

This comment has been minimized.

talves commented Nov 15, 2014

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.

@talves talves closed this Nov 15, 2014

@iamstarkov

This comment has been minimized.

iamstarkov commented Jul 2, 2015

is it still the best solution?

@ColCh

This comment has been minimized.

ColCh commented Jul 2, 2015

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

This comment has been minimized.

iamstarkov commented Jul 2, 2015

prob you are talking about webpack/webpack#595

@NekR

This comment has been minimized.

NekR commented Jul 31, 2015

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

This comment has been minimized.

NekR commented Jul 31, 2015

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

@alkema

This comment has been minimized.

alkema commented Sep 19, 2015

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

@ColCh

This comment has been minimized.

ColCh commented Sep 20, 2015

@alkema pleased to help 😊

@alexandrbig

This comment has been minimized.

alexandrbig commented Jan 20, 2017

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

@iamstarkov

This comment has been minimized.

iamstarkov commented Jan 20, 2017

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

@jasongrout

This comment has been minimized.

jasongrout commented Feb 12, 2018

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment