SVG to JSX Converter

Paste SVG markup and get a ready-to-use React JSX component.

Wrap in component

TypeScript

Remove width/height

SVG Input

JSX Output

export default function Icon(props) {
    return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <circle cx="12" cy="12" r="10" />
      <line x1="12" y1="8" x2="12" y2="12" />
      <line x1="12" y1="16" x2="12.01" y2="16" />
    </svg>
    );
}

SVG-specific conversions applied:

stroke-width → strokeWidth
fill-rule → fillRule
clip-path → clipPath
stroke-linecap → strokeLinecap
font-size → fontSize
text-anchor → textAnchor
xlink:href → href
xmlns removed
All kebab-case attrs camelCased