What does the converter change in my SVG?

It removes the XML declaration, the DOCTYPE and editor namespaces, converts attributes to the camelCase names React expects (stroke-width becomes strokeWidth, class becomes className) and wraps the markup in a typed TypeScript component.

Can I pass props to the component?

Yes. The component accepts a size prop for width and height, plus all standard SVG props, so you can pass className, onClick, style or aria attributes like on any svg element.

How is the component named?

The name comes from your file name in PascalCase, so arrow-left.svg becomes ArrowLeft. If the file name does not start with a letter, the component name starts with Icon instead.

Can I paste SVG code instead of uploading a file?

Yes. Drop an SVG file or paste the SVG markup directly into the text box, then generate the component.

Is my SVG uploaded to a server?

No. The conversion runs entirely in your browser. Your file is never uploaded to a server, no account is required and nothing is stored after you close the tab.

SVG to React Component

Turn any SVG into a clean TypeScript React component in one click. Drop a file or paste your SVG code.

or paste SVG code

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

Frequently asked questions

View all FAQs →

What does the converter change in my SVG?: It removes the XML declaration, the DOCTYPE and editor namespaces, converts attributes to the camelCase names React expects (stroke-width becomes strokeWidth, class becomes className) and wraps the markup in a typed TypeScript component.
Can I pass props to the component?: Yes. The component accepts a size prop for width and height, plus all standard SVG props, so you can pass className, onClick, style or aria attributes like on any svg element.
How is the component named?: The name comes from your file name in PascalCase, so arrow-left.svg becomes ArrowLeft. If the file name does not start with a letter, the component name starts with Icon instead.
Can I paste SVG code instead of uploading a file?: Yes. Drop an SVG file or paste the SVG markup directly into the text box, then generate the component.
Is my SVG uploaded to a server?: No. The conversion runs entirely in your browser. Your file is never uploaded to a server, no account is required and nothing is stored after you close the tab.

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 Editor

Edit shapes, paths, text and colors of any SVG online, then download the result.

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 PDF

Convert any SVG into a sharp vector PDF. Fit to the SVG or use A4, Letter, Legal or A3.

SVG to Base64

Encode any SVG as a Base64 data URI for use in CSS, HTML or JavaScript.

SVG to DXF

Convert any SVG file to DXF format for laser cutters, CNC routers and vinyl cutters.

JPG to DXF

Vectorize a JPG image and export it as DXF for laser cutting or CNC.

Image to DXF

Vectorize any PNG, JPG, WEBP, GIF, AVIF, TIFF or BMP image and export it as DXF.

PNG to DXF

Vectorize a PNG image and export it as DXF for laser cutting or CNC.

SVG to Favicon

Convert any SVG into a favicon.ico, SVG favicon, and apple-touch-icon PNG in one click.

SVG Pattern Maker

Turn any SVG into a seamless repeating tile pattern. Download as SVG or copy the CSS snippet.

SVG Animator

Animate any SVG stroke by stroke, then export an animated SVG or an MP4 video.

SVG to JPG

Export any SVG as a JPG at 1x to 4x with your choice of background color and quality.

SVG to WebP

Export any SVG as a WebP image at 1x, 2x, 3x or 4x. Smaller files than PNG, fully in your browser.

SVG QR Code

Generate a scalable vector QR code. Custom colors, transparent background, download as SVG or PNG.

SVG to Embroidery

Convert SVG outlines to Tajima DST embroidery format for use with embroidery machines.