Free SVG tool

SVG to React (JSX) converter

Paste an SVG and name it. You get a React component with every attribute in camelCase, inline styles as objects, and props spread on the root, so width, className and onClick just work.

Your SVG

Paste the code, or pick a file.

Component name

sun.jsx

export default function SunSvg(props) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...props}>
      <circle cx="12" cy="12" r="4"/>
      <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>
      </svg>
  );
}

Need an SVG to start with?

Browse the library Make one with AI

More tools: SVG to CSS · SVG to PNG · SVG recolour · Shape divider generator · Blob generator