SVG to JSX / React Component Converter
Paste an SVG and get JSX markup or a complete React component. Converts attributes to camelCase, handles style objects, removes XML cruft, and wraps in a component with props/ref support.
JSX output will appear hereAbout SVG to JSX Converter
- Attribute conversion — converts 80+ SVG attributes from kebab-case to camelCase (stroke-width → strokeWidth, fill-opacity → fillOpacity).
- Style objects — transforms inline style strings to JSX-compatible style objects.
- Component wrapping — generates a complete React component with customizable name, props spread, forwardRef, and memo.
- TypeScript support — outputs typed components with SVGProps interface and optional custom props.
- Cleanup — removes XML declarations, comments, DOCTYPE, and namespace cruft automatically.
- Everything runs in your browser — no data is sent over the network.
Related Convert Tools
OpenAPI to TypeScript
Convert OpenAPI 3.x and Swagger 2.0 specs to TypeScript interfaces and types with $ref resolution, allOf/oneOf/anyOf, enums, and API operation types
JSON to Zod Converter
Convert JSON or JSON Schema to Zod validation schemas with $ref resolution, allOf/oneOf/anyOf, enum, format constraints, and required/optional fields
GraphQL to TypeScript
Convert GraphQL SDL schemas to TypeScript interfaces, types, enums, unions, and operations
TypeScript to JavaScript
Convert TypeScript to JavaScript — strip types, interfaces, enums, generics, and access modifiers to get clean JS output