SVG to JSX

Paste raw SVG markup and instantly convert it into a ready-to-use React (JSX/TSX) component with camelCase attributes.

Written by code.liveHow we review content

Component name

Input SVG

JSX Componenttypescript

function Icon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" strokeWidth="2" fill="none" strokeLinecap="round">
      <path d="M12 2L2 22h20L12 2z" fill="currentColor" />
    </svg>
  );
}

export default Icon;

Back to Tools

SVG to JSX

Paste raw SVG markup and instantly convert it into a ready-to-use React (JSX/TSX) component with camelCase attributes.

Written by code.liveHow we review content

Component name

Input SVG

JSX Componenttypescript

function Icon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" strokeWidth="2" fill="none" strokeLinecap="round">
      <path d="M12 2L2 22h20L12 2z" fill="currentColor" />
    </svg>
  );
}

export default Icon;