Skip to content
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

Unknown prop xmlns on <svg> tag with React 15.2.0 #25

Closed
udovenko opened this issue Jul 4, 2016 · 6 comments
Closed

Unknown prop xmlns on <svg> tag with React 15.2.0 #25

udovenko opened this issue Jul 4, 2016 · 6 comments
Assignees
Milestone

Comments

@udovenko
Copy link

udovenko commented Jul 4, 2016

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

warning.js?0260:44Warning: Unknown prop xmlns on tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

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

@choffmeister
Copy link

@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
Copy link
Author

udovenko commented Jul 6, 2016

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

@mrbinky3000
Copy link

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

facebook/react#2250

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

@rikukissa
Copy link

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 jhamlet added this to the v0.4.0 milestone Jul 9, 2016
@jhamlet jhamlet self-assigned this Jul 9, 2016
@jhamlet
Copy link
Owner

jhamlet commented Jul 9, 2016

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.

choffmeister added a commit to choffmeister/svg-react-loader that referenced this issue Jul 15, 2016
@jhamlet
Copy link
Owner

jhamlet commented Jul 31, 2016

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

@jhamlet jhamlet closed this as completed Jul 31, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants