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.
// SVG → JSX attribute conversion reference
// Hyphenated → camelCase
stroke-width → strokeWidth
stroke-linecap → strokeLinecap
stroke-linejoin → strokeLinejoin
fill-opacity → fillOpacity
fill-rule → fillRule
clip-path → clipPath
clip-rule → clipRule
font-size → fontSize
text-anchor → textAnchor
stop-color → stopColor
flood-color → floodColor
// Special cases
class → className
xmlns:xlink → (remove entirely)
xlink:href → href // or xlinkHrefNamespace 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
Number Base Converter
Convert numbers between binary, octal, decimal, and hex
CSV ↔ JSON Converter
Convert between CSV and JSON formats with custom delimiters
URL Encoder & Decoder
Encode and decode URLs with encodeURIComponent and encodeURI
JSON ↔ YAML Converter
Convert between JSON and YAML for Kubernetes, Docker, and CI/CD configs