SVG Attribute to JSX Conversion Reference
React requires SVG attributes in camelCase instead of kebab-case. This tool automatically converts all 80+ SVG attributes to their JSX equivalents so you never have to look them up manually.
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.
Common SVG attribute conversions
The most frequently needed conversions include: stroke-width → strokeWidth, fill-opacity → fillOpacity, stroke-linecap → strokeLinecap, stroke-linejoin → strokeLinejoin, clip-path → clipPath, fill-rule → fillRule, font-size → fontSize, text-anchor → textAnchor, stop-color → stopColor, and class → className. These cover the vast majority of SVG icons you will encounter.
Namespace and style handling
Beyond simple attribute renaming, JSX requires inline styles as objects ({ strokeWidth: 2 } instead of 'stroke-width: 2'), xlink:href becomes xlinkHref, and namespace declarations like xmlns:xlink are typically removed since React handles SVG namespaces automatically. This tool handles all of these transformations.
Frequently Asked Questions
Why does React require camelCase SVG attributes?
React uses a virtual DOM that maps to JavaScript object properties, which follow camelCase convention. Since JSX compiles to JavaScript function calls, attributes must be valid JavaScript identifiers — so stroke-width becomes strokeWidth.
What happens to attributes the tool doesn't recognize?
Unrecognized attributes are passed through unchanged. Standard data-* and aria-* attributes are already valid in JSX and don't need conversion.
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