Unknown prop `xmlns` on <svg> tag with React 15.2.0

[udovenko]

Hi! After upgrading to React 15.2.0 I got this warning:

warning.js?0260:44Warning: Unknown prop xmlns on

in svg (created by TekoaLogo) in TekoaLogo (created by Header) in a (created by Link) in Link (created by IndexLink) ...

[choffmeister]

@udovenko Here is a quickfix, that you can use until this is solved:

Install string-replace-loader as dependency and configure your webpack loader to strip the xmlns stuff before passing it to svg-react-loader. The relevant part of your webpack config could look like this:

module.exports = {
  module: {
    loaders: [
      {
        test: /\/icons\/(.*)\.svg(\?.*)?$/,
        loader: 'babel!svg-react' +
          // removes xmlns tag from svg (see https://github.com/jhamlet/svg-react-loader/issues/25)
          '!string-replace?search=%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22&replace='
      }
    ]
  }
}

Now you can require SVGs like

import FoobarIcon from './icons/foobar.svg?name=FoobarIcon'

[udovenko]

Thank you so much! Will try this fix as soon as possible!

[mrbinky3000]

Having the same issue. This might help you fix it, @udovenko .

https://github.com/facebook/react/issues/2250

Evidently, according to react devs, you don't even need the xmlns attribute. You can leave it out.

[rikukissa]

In addition to the quickfix provided by @choffmeister (thank you so much for that!) I bumped into data-name attributes in my svg (generated by photoshop). To get rid of those also I added another string replacement:

loader: 'babel!svg-react' +
  // removes xmlns tag from svg (see https://github.com/jhamlet/svg-react-loader/issues/25)
  '!string-replace?search=%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22&replace=' +
  // removes data-name attributes
  '!string-replace?search=%20data-name%3D%22%5B%5Cw%5Cs_-%5D*%22&replace=&flags=ig'

[jhamlet]

Putting this on the roadmap as React@>0.14 does a bit more with svgs now.

@choffmeister Thanks for commenting and helping find a work-a-round.

[jhamlet]

Fixed(?) with v0.4.0-beta.2