Getting Invalid value for <path>

[seethroughdev]

Would love to get this working with my react app. (0.14) But I keep getting:

Error: Invalid value for <path> attribute d="\\\"M243.621"

I've tried with several svg files. Same results with each. Any ideas what could be missing?

Thanks in advance.

[sairion]

Thanks for report! I will look into it.

[sairion]

@seethroughtrees Can you provide more detailed message/log and failing svg's content? Any svg causes error is fine and will be very helpful :)

I have tried with more complex SVG examples (for instance, Firefox logo) and didn't see problems yet. path element's d attribute should start with 'M' but it seems like slashes are inserted from some point. Currently this loader does not do any insertion behavior, so it could be simple-html-tokenizer bug... but we will see.

[seethroughdev]

Thanks so much for looking into it @sairion .

I tested with Firefox logo you linked, and am getting the same Invalid value for path.. issue.

I'll try to give some more info here:

Using React with Redux:

    "react": "^0.14.0",
    "react-dom": "^0.14.0",
    "react-modal": "^0.6.0",
    "react-pure-render": "^1.0.2",
    "react-redux": "^4.0.0",
    "react-router": "^1.0.0-rc3",
    "redux": "^3.0.4",
    "redux-actions": "^0.8.0",
    "redux-logger": "^2.0.4",
    "redux-thunk": "^1.0.0",

My webpack.config has the loader:

{
        test: /\.svg$/,
        loader: 'svg-inline'
      },

I'm using the component like this:

<IconSVG src={require('svg-inline!../../icons/bug.svg')} />

I think the problem is related to the value being returned in the src attribute:

module.exports = &quot;<svg xmlns="\&quot;http://www.w3.org/2000/svg\&quot;"><path d="\&quot;M243.621" 156.53099999999995C190.747 213.312 205.34 304 205.34 0 160.031-64 10.812 96.625 1.562 99.625-20.688C736.558 607.375 696.746 580.5 644.746 569.75z\"></path></svg>&quot;

I'm imagining it shouldn't contain anything before/after the svg tags. Unless that's supposed to be stripped somewhere else.

Thanks again for the help.

[seethroughdev]

Okay I got it!

So the problem is that because I was defining the loader in the config AND the template, the file is being by parsed by webpack twice.

Two easy fixes, in case anyone else runs into this:

#1. Remove the loader from your config.

OR

#2. Add a bang at the front of the inline require and it will bypass the other loaders.

<IconSVG src={require('!svg-inline!../../icons/bug.svg')} />

Hope this helps someone else in the future.

[sairion]

Thanks for the detail! I will add some note to README prevent this. 👍

[digitalkaoz]

with the latest loader (or webpack 2.2) you can do this in your react component:

<InlineSVG src={require("file.svg")} />