How do I get rid of react error warnings telling me to change svg attributes to camel case?

Question

Recently my team upgraded from React 15.1 to 15.3. With this upgrade comes these errors:

warning.js:36 Warning: Unknown DOM property stroke-width. Did you mean strokeWidth?
    in g
    in svg
    in div (created by Unknown)
    in div (created by Unknown)
    in Unknown

warning.js:36 Warning: Unknown DOM property fill-rule. Did you mean fillRule?
    in g
    in svg
    in div (created by Unknown)
    in div (created by Unknown)
    in Unknown

I understand that react wants multi-word properties as camel case, but these SVGs need to be usable in a non-React context. Also, they aren't mentioned in any js or jsx file, just in css as a background image like this.

.icon-sprite {
    background-image: url('~icons/sprite.svg');
}

@mixin spriteIcon72( $spriteVals ) {
    @extend .icon-sprite;
    background-repeat: no-repeat;
    background-position: nth($spriteVals, 1) nth($spriteVals, 2);
    background-size: 1300px 600px;
}

The class that the react component would use itself looks like this

.active-icon {
    @include spriteIcon72($sprite-active);
}

How can I get React to stop logging errors in the console about this?

Solution

If you're using WebPack, you can use the babel plugin react-html-attrs here:

https://github.com/insin/babel-plugin-react-html-attrs

From the author's readme, the plugin does the following:

Transforms JSX class attributes into className and for attributes into htmlFor, allowing you to copy and paste HTML into your React components without having to manually edit these particular attributes each time.

In this pull request, which claims to solve your issue, the author has added several other attributes for the plugin to translate, including SVG attributes:

https://github.com/insin/babel-plugin-react-html-attrs/pull/5

Comments

[Harry Theo]

it doesn't work anymore, however SVGR works