SVG to JSX Converter
Turn an SVG into a React component with props, currentColor and TypeScript.
About this tool
Paste SVG code or open an .svg file. You get a ready-to-use React component with a preview. You can spread props onto the <svg>, remove the fixed width and height, switch colours to currentColor, drop xmlns, output TypeScript and pick the component name. Copy the code or download a .jsx or .tsx file.
Turning SVGs into React components
Inlining an SVG as a component lets you style it with CSS, change its colour on hover, animate it and avoid an extra network request. But SVG files exported from Figma, Illustrator, Sketch or Inkscape aren't valid JSX as they come. Hyphenated attributes have to become camelCase: stroke-width becomes strokeWidth, fill-rule becomes fillRule and xlink:href becomes xlinkHref. class becomes className, and editors add clutter such as an XML declaration, <metadata> and inkscape: or sketch: attributes, which this tool strips. Spreading {...props} means you can write <CheckIcon className="h-5 w-5" aria-label="Done" />. Removing width and height lets CSS control the size while the viewBox keeps the proportions. Replacing fills and strokes with currentColor makes a one-colour icon follow the text colour, which suits icon sets. With TypeScript on, props are typed as SVGProps<SVGSVGElement>. Honest limits: this doesn't shrink path data, so run large files through the SVG optimizer first. ids inside an SVG, such as gradients and clip paths, can clash if the same icon renders twice on a page. The HTML to JSX converter and SVG to data URI are related, and What an SVG is, why it scales forever, and when not to use it explains the format.
Frequently asked questions
How do I use an SVG as a React component?
Convert its attributes to JSX (camelCase, className), wrap it in a function that returns the <svg>, and spread props onto it. This tool does all three.
How do I make an SVG icon change colour with CSS?
Set its fill or stroke to currentColor. It then uses the CSS color of the surrounding element.
Should I remove width and height?
Usually, yes. Keep the viewBox and size the icon with CSS or props so it scales cleanly.
Is my SVG uploaded?
No. Files are read and converted in your browser and nothing is sent.