SVG to JSX

SVG to JSX Converter

Paste an SVG and get a React component: hyphenated attributes become camelCase (stroke-width to strokeWidth, fill-rule to fillRule), xlink:href becomes xlinkHref, class becomes className, and the component passes its props to the <svg> so you can size and colour it.

How do I use the SVG to JSX?

1. Paste an SVG, such as an icon.
2. Pick React component and give it a name.
3. Copy the component.

What does the SVG to JSX do?

• camelCase SVG attributes
• xlink and xml attributes
• {...props} on the root <svg>
• Prettier formatting
• Works for whole illustrations too

Frequently asked questions

Can I pass className or size?

Yes. The component spreads its props onto the <svg>, so <CartIcon className="h-5 w-5" /> works.

Is my code uploaded?

No. The conversion runs in your browser; your code stays on your device.

More JSON tools

Bracely has 98 JSON tools in one page. Related ones:

• CSS to Tailwind
• SQL formatter
• HTML formatter
• CSS formatter
• JavaScript formatter
• TypeScript formatter
• Code screenshot
• HTML to JSX
• JSON Formatter
• JSON Validator
• JSON Viewer
• JSON Repair
• JSON Diff
• JSON to YAML
• JSON to CSV
• jq Playground

Runs entirely in your browser. Nothing you paste is uploaded. Made by Saurabh Pagrut · About · Privacy policy
Last updated 22 October 2026 · Version 5.5 · Changelog
Saurabh Pagrut on GitHub · LinkedIn · X · YouTube · Instagram