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) and uses className instead of class, so hand-pasted SVG usually throws warnings until it is cleaned up — this tool does that automatically. Front-end developers and designers use it when exporting icons from Figma, Illustrator, or an icon set and turning them into reusable React components. Toggle 'Wrap in component' to emit a named function component, and 'TypeScript props' to type it with React.SVGProps so it forwards width, height, className, and event handlers.

How to use SVG to JSX Converter

1. Paste or type your SVG markup into the SVG input box at the top.
2. Read the converted JSX in the output box below — attributes are camelCased, class becomes className, and empty tags are self-closed automatically.
3. Open Settings and turn on 'Wrap in component' to emit a reusable React function component instead of bare JSX.
4. Set the Component name field to control the name used in the wrapper (for example MyIcon).
5. Enable 'TypeScript props' to spread typed React.SVGProps so the component accepts width, className, and other props.
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" class="icon" d="M4 12h16"></path></svg>

<svg viewBox="0 0 24 24"><path strokeWidth="2" className="icon" d="M4 12h16" /></svg>

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

export function MyIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" {...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, fill-rule to fillRule, xlink:href to xlinkHref), turns the class attribute into className, and self-closes empty elements such as path and rect so they are valid JSX.

How do the component and TypeScript options work?

With 'Wrap in component' off you get inline JSX you can place anywhere. Turn it on to wrap the SVG in a named function component using the Component name you enter. Enabling 'TypeScript props' types that component with React.SVGProps and spreads {...props} so it forwards width, height, className, and event handlers.

Does it handle inline styles?

Plain attributes are converted, but a string style attribute is not rewritten into a JSX style object — React expects style as an object of camelCased properties, so review any inline style after pasting. The tool focuses on attribute names, self-closing, and the optional component wrapper.

What if my SVG is invalid?

If the input cannot be parsed as SVG or XML, an error message is shown instead of output. Make sure the markup has a single root element and balanced tags, then the JSX appears again as you type.

Is my SVG uploaded anywhere?

No. The conversion is a pure string transform that runs entirely in your browser, so your SVG markup is never sent to a server and the tool works offline.