Convert an SVG to a React component

Pasting a raw SVG into JSX rarely compiles — React wants camelCase attributes, className instead of class, and a style object rather than a string. This turns the SVG in the editor above into a paste-ready React component, JSX or TSX, so it drops into a project without hand-editing. Everything runs in your browser; the SVG never leaves your machine.

How to convert an SVG to React

• Load your SVG above, or edit the sample. It stays in your browser.
• Open the Code tab — it opens on React — and set the component name.
• Toggle TSX for a typed component, or JSX for a plain one.
• Copy the component, or download it as a .tsx or .jsx file.

What the React component gives you

• A function component whose root <svg> spreads {...props}, so you pass className, width, style, or aria-label from where you use it.
• Correct React attribute names — class → className, stroke-width → strokeWidth — and inline styles converted to an object.
• Optional React.memo to skip re-renders when props are unchanged, and forwardRef to expose the underlying svg node.
• Valid TSX types (React.SVGProps<SVGSVGElement>) when you want them, or clean JSX when you don't.

currentColor makes it themeable

With “replace fill with currentColor” on, the icon follows the surrounding text color. One component then recolors through CSS — no duplicate files per color, no re-export when the palette changes. That's the difference between a react component you configure at the call site and a static asset you copy: the same jsx works in a button, a heading, and a dark theme, and the tsx version keeps it type-checked while it does.