Convert an SVG to a React component (JSX)
Turn an SVG into a ready-to-use React/JSX component (camelCase attributes, custom name).
The SVG receives {...props}: you can pass className, width, style, etc. Attributes are converted to camelCase for React.
🔒 100% client-side — no data sent
Turn any SVG into a reusable React component: attributes are converted to camelCase (stroke-width → strokeWidth), the component name is customizable and {...props} is added. Everything is generated locally.
What is it for?
- ▸ Create a React icon component from an SVG
- ▸ Add a pictogram to a component library
- ▸ Make an SVG styleable via props (className, color)
- ▸ Convert a batch of exported icons
FAQ
Why add {...props}?
So you can pass className, width, height, style or event handlers to the SVG from outside the component.
Are tags like linearGradient preserved?
Yes, the case of SVG elements (linearGradient, clipPath…) is preserved as React requires.
Can I change the color afterwards?
Yes, if the SVG uses currentColor, the color follows the parent component's CSS color property.
Is it TypeScript-compatible?
The output is plain JSX; for TypeScript, add a props type such as (props: React.SVGProps<SVGSVGElement>).