SVG to JSX

Convert SVG to React components

Source SVG

JSX Component

export const Icon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill="red" />
  </svg>
);

Rules Applied

kebab-case to camelCase

Typed React components

Reserved keyword escaping

Functional components

All Developer Tools