SVG to React component — JSX/TSX with props
Paste an SVG and get a ready-to-use React component: attributes camelCased, props spread onto the root, and a name you choose. It converts entirely in your browser (0 uploads, works offline).
How to use it
- Paste your SVG markup.
- Set the component name and whether you want TypeScript.
- Copy or Download the component.
FAQ
How do I turn an SVG into a React component for free?
Paste the SVG and this page camelCases attributes like stroke width, spreads incoming props onto the root element and wraps it in a named function component — TypeScript or JavaScript — on your device with no upload.
Does the component accept props like className and onClick?
Yes. Props are spread onto the root SVG element, so you can pass a className, a size, a click handler or any standard SVG prop when you use it.
Is my SVG uploaded anywhere?
No. The conversion runs entirely in your browser and nothing is transmitted or stored, which you can verify by turning off your Wi-Fi.
Can it output TypeScript types?
Yes. With TypeScript on, the props are typed as SVG element props, so the component is drop-in ready in a typed React project.
Limits
Converts the markup and attributes; it does not optimise the SVG paths — run an SVG optimiser first for the smallest output.
Related
The HTML-to-JSX tool converts general markup; the SVG optimiser shrinks the file first.
Bookmark this page (Ctrl+D, or ⌘D on Mac) or install the app — it works offline the next time you need it.