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
HTML Entity Encoder
Encode and decode HTML entities, special characters, and symbols
Image to Base64
Convert images to Base64 data URIs or decode Base64 back to images
JSON to TypeScript
Generate TypeScript interfaces and type aliases from JSON data
HTML ↔ Markdown
Convert between HTML and Markdown in either direction