Input SVG Code

SVG size: 0 chars

Options

Generate TypeScript types (React.FC) Support size prop (control dimensions via props) Support color prop (control color via props) Component name:

Result (React JSX)

Waiting for conversion...

💡 How to Use

1. Paste SVG code into the input area
2. Configure options (TypeScript, size/color props)
3. Click "Convert to JSX" to convert
4. Automatic attribute conversion: class→className, stroke-width→strokeWidth, fill-rule→fillRule, etc.
5. Optional TypeScript React.FC type definitions

❓ FAQ

What attribute conversions does it handle?

The converter automatically transforms: class→className, stroke-width→strokeWidth, fill-rule→fillRule, clip-rule→clipRule, stroke-linecap→strokeLinecap, stroke-linejoin→strokeLinejoin, xmlns→removed, style→object notation, and all hyphenated SVG attributes to JSX camelCase format. Self-closing tags are also handled.

Why use size and color props?

Enabling "Support size prop" makes the component accept width/height parameters (default 24px). "Support color" passes stroke/fill colors via props. This makes your SVG icons reusable across your app — just drop the component and customize size/color via props without editing JSX.

How is TypeScript different?

When TypeScript is enabled, the generated component uses React.FC<React.SVGProps<SVGSVGElement>> type definitions with full type checking. The component is also automatically exported for use in .tsx files.

🔄 SVG to React JSX Converter