SVG to React Component
Turn any SVG into a clean TypeScript React component in one click. Drop a file or paste your SVG code.
Drop your SVG here
or click to browse. SVG files only.
What does this tool do?
When you use an SVG inline in React, you need to convert HTML attributes to JSX syntax. Every stroke-width becomes strokeWidth, every class becomes className, and so on for dozens of attributes. Doing this by hand is tedious and error-prone.
This tool converts your SVG automatically and wraps it in a typed React component that accepts a size prop and forwards any extra SVGProps to the root element. The result is ready to drop into any React or Next.js project.
What gets converted?
- ✓All hyphenated attributes → camelCase (stroke-width, fill-opacity, clip-path…)
- ✓class → className
- ✓for → htmlFor
- ✓xlink:href → href
- ✓Unnecessary XML declarations and namespaces removed
- ✓width and height replaced with a size prop
More free SVG tools
Everything you need to work with SVG files.
SVG Converter
Convert PNG, JPG, WEBP, GIF, AVIF, TIFF or BMP to a crisp SVG vector file.
SVG Color Editor
Edit any color in an SVG file in real-time and download the result instantly.
SVG Palette Swapper
Apply one of 10 curated color palettes to your SVG in a single click.
SVG Optimizer
Compress and clean SVG markup, removing redundant code to reduce file size.
SVG to PNG
Export any SVG as a PNG at 1x, 2x, 3x or 4x resolution, fully in the browser.
SVG to Base64
Encode any SVG as a Base64 data URI for use in CSS, HTML or JavaScript.