I am working on code refactoring on a React project. It has ponents like this

import * as React from "react";

function SvgPage(props) {
  return (
    <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg> );
}



export default SvgPage;

I am working on code refactoring on a React project. It has ponents like this

import * as React from "react";

function SvgPage(props) {
  return (
    <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg> );
}



export default SvgPage;

These SVG files render without any issue but in the console, it gives me the error

Warning: Invalid DOM property stroke-width. Did you mean strokeWidth?

How do I get rid of these console warnings? I search google and find SVGR library. But I am not sure how to use it to fix the problem.

any help!

Thanks in advance! =)

• javascript
• reactjs
• dom
• webpack

2 Answers 2

From the docs,

Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.

For example, class bees className in JSX, and tabindex bees tabIndex.

Replace hyphenated prop names with their camelCase versions.

<circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill="yellow" />

I think this is your error

so you have to change attributes inside the svg tag to use camel case, like stroke-width="4" as strokeWidth="4" and stroke-linecap="" as strokeLinecap=""