loot.tools

SVG to React Component

Paste SVG you exported from Figma, Illustrator, or an icon set and get a ready-to-import React component back. Attributes are camelCased the way JSX wants them (stroke-width to strokeWidth, fill-rule to fillRule), the markup is wrapped in a function component with the name you choose, and {...props} is forwarded onto the root svg so callers can set size, color, className, and handlers. Pick plain JavaScript or TypeScript, and optionally wrap the export in React.memo. It all runs in your browser.
Code

Paste SVG you exported from Figma, Illustrator, or an icon set and get a React component back. Attributes are camelCased the way JSX wants them, the markup is wrapped in a function component, and {...props} is forwarded onto the root svg so callers can set size, color, and handlers. All in your browser.

SVG Input
React Component
What this tool does
It parses your SVG, camelCases the attributes React expects (stroke-width to strokeWidth, clip-path to clipPath), and wraps the markup in a function component. You name the component, choose JavaScript or TypeScript, and decide whether to forward props and wrap it in memo. Copy the result straight into your project.
Why you'd use this
Design tools export SVG with kebab-case attributes and no component shell. Pasting that into React means renaming every attribute by hand and writing the wrapper yourself. This does both in one step, so an exported icon becomes a usable component in seconds.
About the props
When prop forwarding is on, {...props} is placed last on the root svg element so anything the caller passes (a new width, a color, a className, an onClick) overrides the SVG's baked-in values. In TypeScript mode the props are typed as SVGProps<SVGSVGElement>, the same type React uses for a native svg.