SVG to JSX Converter

What is SVG to JSX Converter?

SVG to JSX Converter is a free in-browser tool that turns plain SVG markup into valid React JSX you can drop straight into a component. React expects DOM attributes in camelCase (strokeWidth, clipPath, fillRule), uses className instead of class, and needs the style attribute as an object of camelCased properties rather than a string — this tool fixes all of that automatically. Front-end developers and designers use it when exporting icons from Figma, Illustrator, or an icon set. Turn on the optional cleanup to strip comments, editor metadata, and XML declarations, and choose whether the output is inline JSX or a function, memo(), or forwardRef component typed with React.SVGProps.

How to use SVG to JSX Converter

1. Paste your SVG markup into the input box, or drop an .svg file onto the drop zone.
2. Read the converted JSX in the output box — attributes are camelCased, class becomes className, an inline style becomes a style object, and empty tags self-close automatically.
3. Open Settings and pick a Component output: inline JSX, a function component, a memo() component, or a forwardRef component.
4. Set the Component name field to control the name used in the wrapper (for example MyIcon).
5. Enable TypeScript props to type the component with React.SVGProps, or turn on Clean up SVG to strip comments and editor metadata first.
6. Click Copy to copy the JSX, then paste it into your React or Next.js project.

Examples

<svg viewBox="0 0 24 24"><path stroke-width="2" style="fill:none;stroke-linecap:round" d="M4 12h16"/></svg>

<svg viewBox="0 0 24 24"><path strokeWidth="2" style={{ fill: "none", strokeLinecap: "round" }} d="M4 12h16" /></svg>

<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>

export const MyIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(function MyIcon(props, ref) {
  return (
    <svg viewBox="0 0 24 24" ref={ref} {...props}><circle cx="12" cy="12" r="10" /></svg>
  );
});

Frequently asked questions

What does the converter change in my SVG?

It renames hyphenated and namespaced attributes to React's camelCase form (stroke-width to strokeWidth, xlink:href to xlinkHref), turns class into className, rewrites an inline style string into a JSX style object with camelCased keys, and self-closes empty elements such as path and rect so they are valid JSX.

How do the component output options work?

Choose inline JSX to place the markup anywhere, or wrap it as a function, memo(), or forwardRef component using the Component name you enter. A forwardRef component receives a ref that is attached to the root svg. Enable TypeScript props to type any wrapper with React.SVGProps and spread {...props}.

Does it convert inline styles?

Yes. A style="fill:red;stroke-width:2" attribute is rewritten into a JSX style object like style={{ fill: "red", strokeWidth: "2" }}, with property names camelCased and values kept as strings. CSS custom properties (--var) are preserved as string keys.

What does the SVGO-style cleanup do?

When Clean up SVG is on, the tool strips XML declarations, DOCTYPE, comments, <metadata>, editor namespaces such as inkscape: and sodipodi:, and the svg version attribute, then collapses whitespace — all before the JSX conversion runs.

Is my SVG uploaded anywhere?

No. Dropping a file or pasting markup runs a pure string transform entirely in your browser, so your SVG is never sent to a server and the tool works offline.