jsontools
Free · No signup · No tracking

SVG to JSX

Turn an SVG file into a React component: className, camelCase props, style objects. Entirely in your browser.

Source SVG
paste or type · or drop a .svg file
JSX
Fix the error in your input to see JSX output

What changes

SVG is valid XML; JSX is not quite HTML. The converter renames class to className, renames kebab-case attributes to camelCase (stroke-width becomes strokeWidth), turns a style string into a JS object, and turns XML comments into JSX comments.

class="icon"className="icon"
stroke-width="2"strokeWidth="2"
style="fill:red"style={{ fill: 'red' }}
<!-- note -->{/* note */}

Why not Vue or Svelte too?

SVG is already valid template syntax in both Vue and Svelte, so a converted output would just be the same markup pasted under a <template> tag with no real transform behind it. JSX is the one target where the syntax actually differs from raw SVG.

Attributes React doesn't recognize

React passes unrecognized kebab-case attributes straight through as literal DOM attribute names, so an obscure or vendor-specific attribute missing from the camelCase list still renders correctly, just not in idiomatic camelCase form.