Skip to content
Online SVG Editor

Tools

SVG to JSX converter

Paste SVG, get a React component. Supports TypeScript and custom component names.

How to convert SVG to JSX

  1. Paste the SVG source.
  2. Set the component name (and TS if you like).
  3. Click Convert.
  4. Copy or download the JSX file.

About SVG to JSX

React and JSX need camelCase attribute names and className instead of class. This tool handles those rewrites and gives you a drop-in component.

Frequently asked questions

Does it spread props into the root <svg>?

Yes — callers can pass className, style, onClick, etc.

How are hyphenated attributes handled?

They are converted to camelCase: stroke-width → strokeWidth.

Can I choose TypeScript?

Yes — enable the TS toggle to emit a typed component.

Is the output tree-shakeable?

It is a named export, so bundlers can tree-shake it like any other module.