How SVG attributes become JSX props

React components on this site are printed by SVGR. SVGR parses the SVG and writes JSX. It does not scan the file as text and replace dashes with capital letters. A label inside a <text> element that happens to contain the characters stroke-width stays as that text. The attribute on an element is what changes.

Names that change

SVG uses XML attribute names. JSX uses the DOM property names React already expects. On a normal icon the converter produces these pairs:

• class becomes className.
• stroke-width becomes strokeWidth. A bare number is written as an expression, so stroke-width="2" becomes strokeWidth={2}.
• stroke-linecap becomes strokeLinecap, and stroke-linejoin becomes strokeLinejoin.
• fill-rule becomes fillRule, and clip-rule becomes clipRule.
• clip-path becomes clipPath.
• stop-color on a gradient stop becomes stopColor.
• A style attribute becomes a JavaScript object, so style="fill:#ff00aa" is printed as a style prop rather than as an HTML string.

A compact input looks like this:

<rect class="icon" fill-rule="evenodd" stroke-width="2" stroke-linecap="round" />

The JSX for that element uses the React names:

<rect className="icon" fillRule="evenodd" strokeWidth={2} strokeLinecap="round" />

Names that stay

viewBox is already the name React accepts on an svg element, so it is not rewritten to something like viewbox. xmlns, path data in d, gradient id values, and fill="url(#bg)" stay in the tree when the sanitizer has allowed them. width and height stay as attributes when the width-and-height-props switch is off. When that switch is on, the root svg takes width and height props whose defaults come from the SVG or, if those attributes are missing, from the viewBox.

What this is not

Vue and Svelte output on this site does not go through SVGR. Those files keep template attribute names, so class stays class and stroke-width stays stroke-width. The React Native converter does use SVGR, with native: true, and it imports react-native-svg. The pages at /, /svg-to-jsx/, and /svg-to-tsx/ keep native: false and emit a web svg element.

Extra props on the generated component are spread onto the root svg. Callers can pass className, role, and aria-* from the parent. That spread is part of the component signature, not a second rewrite of the original attributes.

The same pipeline is what the homepage table summarizes. Paste an icon into the converter with Optimize and currentColor left off if you want to see the attribute rewrite without the color and cleanup passes described in the other guides.