SVG to JSX

Convert SVG markup into a React JSX component — attributes renamed, styles converted, optional TypeScript props.

Markup is parsed and rewritten in this browser — nothing is sent anywhere.

One SVG per run, up to 200,000 characters. Attributes are renamed to JSX style (stroke-width → strokeWidth, class → className); a style="" string becomes a style object.

How to use

  1. Paste SVG markup.
  2. Pick component name and options.
  3. Copy the JSX output.

What it supports

Renames HTML-invalid attributes (class→className, stroke-width→strokeWidth, xlink:href→href), converts style strings to objects, drops comments and processing instructions. Malformed XML is rejected with a position — no partial output.

Related tools

Related guides