SVG to React Component
Paste SVG markup, get a ready-to-import React functional component with camelCase attributes.
How it works
The SVG is parsed with the browser's own DOM parser, so it's actually understood as
markup, not just pattern-matched. Every attribute name is converted to its React/DOM
equivalent using the same mapping React itself uses internally (stroke-width
→ strokeWidth, class → className,
xlink:href → xlinkHref, and so on), the tree is
re-serialized as JSX, and it's wrapped in a small functional component. With "Accept
props" on, {...props} is spread onto the root element so callers can pass
width, className, or an onClick handler the usual
React way.
Parsing and conversion happen entirely in this page's JavaScript against the DOM the browser builds from your input. Nothing is uploaded.
Common questions
What changes between the SVG and the JSX?
Attribute names switch to camelCase (stroke-width becomes strokeWidth, fill-rule becomes fillRule), class becomes className, and self-closing tags get the trailing slash JSX requires. The visual output is identical.
Can I control the size and color from props?
Turn on "Accept props" to have the component spread {...props} onto the root <svg> element, so you can override width, height, className, or anything else from wherever you use it, the standard pattern for icon components.
Does this send my SVG anywhere?
No. The conversion is plain string/attribute transformation done in your browser. Nothing is uploaded.