SVG to JSX
Convert SVG markup into a ready-to-use React/TypeScript functional component. All SVG attributes are automatically converted to JSX camelCase syntax.
All processing is done locally in your browser. No data is sent to our servers.
What the Converter Does
React uses JSX which requires attribute names in camelCase rather than the hyphenated format
used in HTML/SVG. For example, stroke-width becomes
strokeWidth, and
class becomes
className.
This converter handles all standard SVG-to-JSX attribute transformations automatically.
The output component accepts React.SVGProps<SVGSVGElement>
as props, spread directly onto the root <svg> element.
This lets callers override any attribute - including width,
height,
className, and
aria-* attributes.
Attribute Conversions
class className stroke-width strokeWidth stroke-linecap strokeLinecap stroke-linejoin strokeLinejoin fill-rule fillRule clip-path clipPath clip-rule clipRule font-size fontSize font-family fontFamily stop-color stopColor stop-opacity stopOpacity text-anchor textAnchor