SVG to React Component Converter
Convert SVG markup into a React component with camel-cased JSX props, className and optional TypeScript types.
React component
Paste SVG above to see the JSX instantly.
Best-effort translation, not a full SVG compiler: comments, <script>
elements and inline on* event attributes are dropped, and CSS inside
<style> is passed through untouched as a template literal.
How it works
Paste SVG markup and this tool parses it with the browser's own DOMParser
(XML first, with a lenient HTML pass as a fallback for markup that is not well-formed
XML), then walks the resulting DOM and prints it back out as JSX. Attribute names are
renamed to the React DOM property names: hyphenated and namespaced SVG attributes become
camelCase (stroke-width becomes strokeWidth,
stop-color becomes stopColor, xlink:href becomes
xlinkHref), class becomes className, and
data-* and aria-* keep their hyphens because React passes those
through verbatim. Attributes that are already camelCase in SVG, such as
viewBox, preserveAspectRatio and gradientTransform,
are left alone, and the lower-cased spellings an HTML parser produces are repaired.
Inline style="fill:red" becomes a style object, with vendor prefixes
converted to their React spelling, and empty elements are emitted self-closing.
The options tune the result. TypeScript types the props as
React.SVGProps<SVGSVGElement> and downloads a .tsx file.
Spread props adds a props spread to the root <svg> so
callers can override anything. currentColor rewrites literal
fill and stroke values, other than none and
url(...) references, so the icon inherits the surrounding text colour.
Drop width/height removes the fixed size and leaves the
viewBox so CSS can scale it.
This is a translator, not an optimiser: it does not minify paths or run SVGO, and it does
not rewrite CSS selectors inside <style> blocks, so a class name there
can still clash with other markup on the page. Everything runs locally in your browser,
so nothing is uploaded and the tool keeps working offline.
Frequently asked questions
How do I turn an SVG into a React component?
Paste the SVG markup into the input box and the component appears instantly below it. The tool renames the attributes to their React DOM spellings, so stroke-width becomes strokeWidth, stop-color becomes stopColor, xlink:href becomes xlinkHref and class becomes className, while data-* and aria-* keep their hyphens. Set a component name, tick TypeScript if you want a typed .tsx file, then copy or download the result.
Which parts of the SVG are not converted?
This is a best-effort translator, not a full SVG compiler. Comments, embedded <script> elements and inline on* event attributes are dropped on purpose, and CSS inside a <style> block is passed through untouched as a template literal, so a class name there can still clash with other markup on the page. Paths are never minified and SVGO is not run, so the geometry you paste is the geometry you get back.
What do the currentColor and spread props options do?
currentColor rewrites literal fill and stroke values, other than none and url(...) references, so the icon inherits the surrounding text colour and can be restyled with CSS. Spread props adds a props spread to the root <svg> so callers can override the size, colour, className or accessibility attributes. Drop width/height removes the fixed size and leaves the viewBox behind so CSS can scale the icon freely.