Skip to content
SvgJsx
Language: English

SVG to JSX & React Component Converter

Paste SVG markup or drop .svg files and get a clean, ready-to-commit component for React, TypeScript, React Native, Vue or Solid. Everything runs locally in your browser.

Quick presets:
Drop .svg files here orFiles are read locally with FileReader and are never uploaded.
Options
Export:
const HeartIcon = (props) => (
  <svg width="24" height="24" viewBox="0 0 24 24" className="icon icon-heart" {...props}>
    <g id="Layer_1" fill="none" stroke="#e11d48" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style={{ fillOpacity: "0.15", fill: "#e11d48" }} />
    </g>
  </svg>
);

export default HeartIcon;

Preview

Preview of the converted SVG
Original SVG
706B
Optimized SVG
538B(-24%)
Component
566B

What this SVG converter does

SVG files exported from Figma, Illustrator, Sketch or Inkscape are valid XML, but they are not valid JSX. React expects camelCase props such as strokeWidth instead of stroke-width, className instead of class, and a style object instead of a CSS string. Editors also add XML declarations, comments, metadata blocks and namespaced attributes that bloat your bundle and trigger warnings.

SvgJsx parses the SVG with a small XML parser, rewrites every attribute to the form your framework expects and prints a formatted component. You can choose TypeScript types, a size prop, currentColor fills, forwardRef, memo and the export style, then copy the code or download a file.

How to convert SVG to a React component

The workflow takes a few seconds:

  • Paste the SVG code into the input box, or drop one or more .svg files onto it.
  • Pick the output format: React, React Native, Vue, Solid or a plain JSX snippet.
  • Set the component name and options such as TypeScript, currentColor and the size prop.
  • Check the live preview and the size comparison, then copy the code or download the file. Several files are bundled into a ZIP.

Conversions applied automatically

Hyphenated attributes become camelCase (stroke-linecap → strokeLinecap), namespaced attributes are flattened (xlink:href → xlinkHref), and inline style strings become JavaScript objects. data-* and aria-* attributes are kept unchanged because React accepts them as they are. Script elements and inline event handlers are removed so a pasted file can never smuggle code into your app.

A light optimisation pass collapses whitespace and can round coordinates to a fixed number of decimals. For most icon sets that cuts 20–40% of the markup without a heavy SVGO dependency.

Frequently asked questions

Is this SVG to JSX converter free?

Yes. SvgJsx is completely free, needs no account and has no usage limits. It is a static site, so there is no server cost to pass on to you.

Are my SVG files uploaded anywhere?

No. Files are read with the browser FileReader API and converted with JavaScript on your device. Nothing is sent to a server, which makes the tool safe for proprietary logos and icons.

What is the difference between SVG and JSX?

SVG is XML markup, while JSX is a JavaScript syntax extension. JSX needs camelCase attribute names, className instead of class, style objects instead of strings and braces for special characters, which is why raw SVG often fails to compile.

Does it work with Figma and Illustrator exports?

Yes. Editor-specific metadata, comments, sodipodi and inkscape attributes and the XML declaration are stripped by default, and gradients, masks and clip paths keep working because referenced ids are preserved.

Can I convert many SVG icons at once?

Yes. Drop several .svg files and each one becomes its own component named after the file. Download them all as a ZIP that also contains an index file re-exporting every icon.