SVG to JSX Converter
stroke-width → strokeWidth, class → className, inline styles → objects. currentColor makes the icon inherit the surrounding text color instead of hard-coding one.
SVG to JSX Converter — Free Online Tool
Converts an SVG into a React component, camelCasing hyphenated attributes such as stroke-width and clip-rule, renaming class to className, converting inline style strings into objects, optionally replacing hard-coded fill and stroke colors with currentColor and forwarding props, so an exported icon drops straight into a component library.
How to use the SVG to JSX Converter
- Open the tool above — it runs entirely in your browser, so your input never leaves this page.
- Paste or type your input into the field, then press the relevant button (e.g. Encode / Decode, Generate, or Convert).
- Copy the result from the output area with the copy button orCtrl/Cmd + C.
- No signup, no upload, and no tracking — repeat as often as you need.
Frequently asked questions
Which SVG attributes get renamed?
Hyphenated ones are camelCased — stroke-width becomes strokeWidth, clip-rule becomes clipRule, stop-color becomes stopColor — and class becomes className. xmlns, data-* and aria-* are passed through unchanged because React accepts them as written.
What does the currentColor option do?
It replaces hard-coded fill and stroke values with currentColor, so the icon inherits the surrounding text color. That is what lets one icon component work in light and dark themes without a variant per color.
Why spread props onto the root <svg>?
So callers can pass className, width, height, aria-label or an onClick without editing the component. It is the convention every icon library follows, and it is why the generated signature takes React.SVGProps<SVGSVGElement>.
Free & private — why use this SVG to JSX Converter
The SVG to JSX Converter runs 100% client-side in your browser. Your data is never uploaded to a server, no account is required, and the tool is completely free. It works offline once the page has loaded and is part of a growing collection of privacy-first developer utilities.