SVG to JSX/TSX Converter - React Component Generator
Convert raw SVG code into clean React/TypeScript components with proper attribute casing and prop support.
SVG Input
Paste your SVG code above. The converter will handle kebab-case to camelCase conversion.
💡 How it works
This tool converts SVG attributes to React props with proper camelCase (e.g., stroke-width → strokeWidth). It also handles self-closing elements, style objects, and generates TypeScript interfaces when enabled.
TypeScript Output
Copy this code into your React project. Make sure to install required dependencies if using TypeScript.
🔄 Conversion Details
- • SVG attributes converted to camelCase React props
- • Self-closing elements properly handled
- • Style strings converted to style objects
- • TypeScript interfaces generated when enabled
- • Configurable component props (width, height, color, className)
- • Support for both default and named exports
⚡ Automatic Conversion
Convert SVG attributes to React props with proper camelCase naming (stroke-width → strokeWidth).
📝 TypeScript Support
Generate TypeScript interfaces with proper type definitions for your React components.
🔒 Privacy First
All processing happens locally in your browser. Your SVG code never leaves your device.