SVG to JSX Converter

Paste SVG markup and convert it to JSX or a ready-to-use React component. Automatically handles camelCase attributes, inline styles, and prop spreading.

Name

SVG input

JSX output

Output appears here.

About SVG to JSX conversion

JSX uses camelCase attribute names and stricter syntax than raw SVG. Attributes like stroke-width, fill-rule, and clip-path become strokeWidth, fillRule, and clipPath.

Enable "React component" to wrap the SVG in a reusable component that accepts all standard SVG props through {...props}. Strip the width and height to make the icon scale to its container's size.