21

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?

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
Veg
  • 556
  • 2
  • 8
  • 24

2 Answers2

7

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

fnune
  • 5,256
  • 1
  • 21
  • 35
-1

Change the "stroke-width" to "strokeWidth". This will not cause any problem.

kasif mansuri
  • 21
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 20 '23 at 23:44