Skip to content

SVG to JSX converter for React components

Free · no sign-up · runs in your browser

Paste an SVG and get a React component back — attributes camelCased, class turned into className, style strings converted to objects, xmlns removed, with optional currentColor, a size prop and TypeScript output. Runs entirely in your browser; nothing is uploaded.

Normalized to PascalCase.

Conversion

Paste a whole file. It never leaves your browser.

The component

Component

export function ArrowRight(): React.ReactElement {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#111111" strokeWidth="2" strokeLinecap="round" className="icon">
      <path d="M5 12h14" />
      <path d="m12 5 7 7-7 7" />
    </svg>
  )
}

What changed

  • xmlns dropped — JSX does not need it.
  • Hyphenated attributes camelCased (data- and aria- left alone).

React does not accept raw SVG. Attributes like stroke-width and stroke-linecap have to be camelCased, class becomes className, and an inline style string has to become an object or React throws. Doing that by hand for an icon set is tedious and easy to get subtly wrong — the classic mistake is camelCasing data- and aria- attributes too, which React only complains about at runtime. This converts the whole file in one paste, and tells you exactly what it changed.

How it works

  1. 01The SVG is parsed as text, not through the DOM, so the result is identical on the server and in your browser and the tool works the same either way.
  2. 02Every hyphenated presentation attribute is camelCased — stroke-width becomes strokeWidth, stop-color becomes stopColor — and class becomes className, for becomes htmlFor, xlink:href becomes xlinkHref.
  3. 03data-* and aria-* attributes are deliberately left alone. React expects those with their dashes intact, and camelCasing them is the most common bug in a hand-rolled converter because nothing fails until runtime.
  4. 04An inline style string is converted to a React style object, with CSS custom properties quoted as keys so they survive.
  5. 05Scripts and every on* event handler are stripped. Nothing here executes them, but the output is going into your codebase, so handing back a component with an onload attribute intact would just move the problem.
  6. 06Optionally: literal fill and stroke colours become currentColor so the icon takes the surrounding text colour, width and height become a size prop, and remaining props are spread onto the root element.

Use cases

  • Converting an icon downloaded from a design tool or an icon library into a component.
  • Turning a Figma SVG export into a typed component with a size prop.
  • Building an in-repo icon set instead of adding an icon-library dependency.
  • Making a monochrome icon theme-aware by switching its fills to currentColor.
  • Fixing an SVG that React refuses to render because of a style string or a hyphenated attribute.
  • Sanitising an SVG from an untrusted source before it goes anywhere near your bundle.

Frequently asked questions

How do I convert an SVG to a React component?

Paste the SVG above and copy the component that appears. The conversion camelCases hyphenated attributes, renames class to className, converts any inline style string to an object, and drops xmlns, which JSX does not need. Choose TypeScript or JavaScript, and optionally add a size prop or switch colours to currentColor.

Why does React reject my SVG?

Three things usually cause it. A hyphenated attribute like stroke-width is not valid JSX and must be strokeWidth. An inline style written as a string throws — React requires an object. And a stray class attribute is silently ignored rather than applied, because React wants className. All three are handled here.

Should data-* and aria-* attributes be camelCased in JSX?

No. React passes those through to the DOM verbatim and expects the dashes — aria-hidden, not ariaHidden; data-testid, not dataTestid. Converting them produces an attribute React does not recognise, and you only find out from a console warning at runtime. This converter leaves them exactly as written.

What does the currentColor option do?

It replaces literal fill and stroke colours with the keyword currentColor, so the icon inherits whatever colour the surrounding text has. That is what makes one icon work on a light and a dark background without a second copy. Values of none and gradient references like url(#id) are left alone, since replacing those would break the shape.

Is my SVG uploaded anywhere?

No. The conversion runs in your browser and nothing is sent to a server. That is also why the URL only remembers your options, not the SVG itself — the file stays on your machine.

Can I convert several SVGs into an icon set at once?

This converts one file at a time, which is the right unit when each icon becomes its own named component. For a whole directory, the usual approach is a build step — SVGR is the standard tool — and this is the faster path for one icon, a quick fix, or checking what a converter should have produced.

Related resources

Related reading

More tools