Convert an SVG to a React component
Paste an SVG and get a ready-to-use React component (.tsx), with all attributes converted to camelCase (className, strokeWidth...) and a spread props prop.
What exactly does this conversion do?
JSX (used by React) doesn't accept kebab-case HTML/SVG attributes like stroke-width or class: they must be written in camelCase (strokeWidth, className). This tool automatically rewrites all the SVG's attributes to follow that convention and wraps the result in a TypeScript function component, ready to be copied into a React project.
Does the generated component accept custom props (color, size)?
Yes, the component spreads all received props ({...props}) directly onto the <svg> tag, so you can pass className, width, height, onClick, etc. from the parent component, just like on any SVG element.
Does the component also work in plain JavaScript (not TypeScript)?
The generated file is TypeScript (with typed props), but removing the type import line and the : SVGProps<SVGSVGElement> annotation is enough to use it directly in a regular JavaScript project.
100% local processing: the component is generated entirely in your browser, and your SVG is never sent to a server.