SVG to JSX
Converts an SVG into a React component: attributes become camelCase, class becomes className, inline styles become an object, and colours can be swapped for currentColor so CSS can drive them. The parsing goes through the browser's own SVG parser rather than string replacement.
SVG
Icon.tsx
The component appears here. Attributes become camelCase, class becomes className, and inline styles become an object.
Falls back to Icon if it is not a valid identifier.
Types the props as SVGProps.
Lets CSS colour the icon.
The viewBox drives the size.
Passes className, onClick and the rest through.
Frequently asked
Why convert fills to currentColor?
Because an icon that carries its own colour cannot follow the text around it. With currentColor the icon inherits the CSS color property, so it changes with the theme, on hover, and inside a disabled button without any extra work. Values of none and url(...) are left alone — the first means no fill, the second points at a gradient.
What does spreading props actually give me?
It puts {...props} on the root svg, so the component accepts className, width, aria-label, onClick and everything else without you editing it again. Combined with the TypeScript option the props are typed as SVGProps<SVGSVGElement>, so the editor autocompletes them and catches typos.
Why drop width and height?
So the icon scales to whatever you put it in. With only a viewBox, size-4 or width: 1em does what you expect. Keep them if you are rendering the icon standalone at its natural size.
Is this SVGR?
No, and it does less on purpose. SVGR runs in a build step and can do template customisation, SVGO passes and ref forwarding. This is the paste-and-go case: one icon, converted correctly, right now. If you are converting a whole icon set as part of a build, use SVGR.
Why parse instead of using regular expressions?
Because attribute rewriting with regex breaks quietly. Hyphens inside quoted values, self-closing tags, nested groups and namespaced attributes all produce output that looks right and fails to compile. Handing the markup to the browser's SVG parser and walking the resulting tree avoids the entire class of bug.