search

jacobmischka / gatsby-plugin-react-svg

Adds svg-react-loader to gatsby webpack config
https://www.npmjs.com/package/gatsby-plugin-react-svg
MIT License
69 stars 21 forks source link

Warning: React does not recognize the `rdfResource` prop on a DOM element. #10

Closed Cathaiste closed 5 years ago

Cathaiste commented 6 years ago

Hi, it's me again,

Appears that using the plugin launch warnings in the console as you can see here: consolewarningplugin I think this kind of warning were launch because of xml syntax like "xmlns:cc", "rdf:resource", etc...

So, is it possible to stop these warning still using the plugin or not ?

gatsby -v : 1.1.58

jacobmischka commented 5 years ago

I believe svg-react-loader supports filtering these kind of things out using query params. You should be able to use them inline now, though this plugin should probably also support passing along options to svg-react-loader. It currently does not.

CathyMacars commented 5 years ago

@jacobmischka I am having the same issue, but with another "prop"; lineSpacing. I've found one instance of line-spacing inside the svg code, is this what's causing it? If so, how do I use svg-react-loader's query params to fix it?

jacobmischka commented 5 years ago

I don't believe line-spacing is a valid svg attribute, I think that's the fundamental cause of the problem. By default svg-react-loader converts most snake-case props to camelCase to please react, but that doesn't help much in this case since I don't believe either are valid.

You should be able to write your own filter to strip that attribute out if you're so inclined (https://github.com/jhamlet/svg-react-loader#filters), or it might be easier to just remove the attribute from the source SVG.

gregorskii commented 5 years ago

+1

EDIT: thanks for the thumbs down. 🤷‍♂️

gregorskii commented 5 years ago

Hi @jacobmischka I think I have a WIP of a solution to this problem.

In #15 I have updated the plugin config to allow a user to pass in filters directly, this will be applied to the correct place in the webpack 2 use config.

I moved some things around to allow webpack to work properly with the ...ruleProps spread.

I added a new config value called omitKeys because I found the filters config to be complex and I felt that end users would be better served with a simple array, the filters key is left in place as well so anyone else can write their own filters.

I made the PR WIP because I have not spent a ton of time testing it.

Let me know what you think.

Cheers

jacobmischka commented 5 years ago

Thanks again! :tada: