What happens to a style="..." attribute?

It's converted into a JS object with every key and value written as a quoted string: style="opacity:0.5;fill:red" becomes style={{ "opacity": "0.5", "fill": "red" }}. Numeric-looking values stay quoted too, since React accepts numeric CSS values as strings anyway, and guessing which properties are meant to be unitless numbers isn't reliable enough to get right every time.

What if an attribute's value itself contains a double quote character?

The converter switches to single quotes for that one attribute instead. If the value contains both a double and a single quote, which neither quoting style can hold safely, it falls back to a JS expression with the value escaped inside, since JSX string attributes, unlike JS string literals, don't support backslash escaping.

What does turning off "Wrap in component" change in the output?

You get the bare JSX markup on its own, with no function declaration or return statement around it, meant for pasting directly into an existing component's return value rather than as a standalone file.

SVG to JSX Converter: React Component from SVG

Source SVGpaste or type · or drop a .svg file

Browse

JSX

Fix the error in your input to see JSX output

Wrap in componentname

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 */}

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.

Frequently asked questions

It mirrors the source structure. An element with no children, like a typical <circle> or <path>, stays self-closing; an element that actually contains other elements gets expanded onto indented lines matching how it was nested in the original SVG.