SVG to React Component Converter

Paste SVG markup and get a ready-to-use JSX React component.

This free svg to react component converter (some people search for the same thing as svg to jsx) parses your SVG with the browser's native DOMParser, converts class to className, camelCases kebab-case attributes like stroke-width, and turns inline style strings into JS objects. No signup, runs entirely in your browser.

Component name

Must be a valid component name. Invalid characters are stripped automatically.

What gets converted

class → className
stroke-width → strokeWidth
fill-rule → fillRule
style="a:b" → style={ {a: 'b'} }

SVG input

JSX output

How SVG to React (JSX) conversion works

Paste SVG markup into the input box above. The tool parses it with the browser's built-in DOMParser, walks the resulting element tree, and rebuilds it as JSX — the exact same output you'd get from an svg to jsx converter, since a JSX React component is what "svg to react component" ultimately means. The class attribute becomes className, because class is a reserved word in JavaScript. Kebab-case SVG attributes like stroke-width, fill-rule, clip-rule, and stop-color are camelCased to strokeWidth, fillRule, clipRule, and stopColor, matching how React expects DOM properties to be named. An inline style="fill:red;stroke-width:2px" string is converted into a JS object literal — style={ {fill: 'red', strokeWidth: '2px'} } — with the CSS property names camelCased the same way. The whole result is wrapped in a function component with your chosen name, and {...props} is spread onto the root <svg> element so callers can pass a className, onClick, or any other prop straight through.

Known limitations

The common cases are handled well, but a few namespaced attributes are special-cased by React rather than being simple kebab-to-camel conversions — most notably xlink:href, which becomes xlinkHref. This tool recognizes that handful of known special cases; any other namespaced attribute it doesn't recognize is left unchanged rather than guessed at, since a wrong guess would silently produce broken markup.

Frequently asked questions

Paste your SVG markup into the input box above. The tool parses it and generates a ready-to-use JSX React component below — this is the same thing people mean by "svg to jsx": every attribute is converted to its JSX equivalent (class becomes className, kebab-case attributes become camelCase) and the whole thing is wrapped in a function component you can drop straight into a .jsx or .tsx file.

The class attribute becomes className, kebab-case attributes like stroke-width, fill-rule, clip-rule, and stop-color become strokeWidth, fillRule, clipRule, and stopColor, and an inline style="a:b;c:d" string becomes a JS object literal like style={ {a: 'b', c: 'd'} } with the CSS property names camelCased too. {...props} is spread onto the root svg element so the component accepts standard React props.

It handles the common cases well — className, camelCased presentation attributes, and style objects — plus a handful of namespaced attributes React special-cases, like xlink:href becoming xlinkHref. Uncommon or custom namespaced attributes that aren't in that special-case list are passed through unchanged rather than guessed at, since a wrong guess is worse than leaving the original name in place.

No. Parsing and conversion happen locally in your browser using the native DOMParser. Nothing is uploaded or stored on a server.