Why convert SVG for React

Inline SVG in JSX needs React's attribute names: stroke-width must be strokeWidth, fill-rule fillRule, xlink:href xlinkHref and class className, otherwise React warns and ignores them. Turning the icon into a component lets you reuse it, colour it with currentColor and size it with CSS.

How to use the SVG to JSX

Paste an SVG, or press Sample.
Choose the component name and options.
Copy the component, or download it as a file.

Examples

An icon component

Input

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>

Output

export default function PlusIcon(props) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      {...props}
    >
      <path d="M5 12h14" />
      <path d="M12 5v14" />
    </svg>
  );
}

Plain JSX, size kept

Input

<svg width="16" height="16" viewBox="0 0 16 16"><use xlink:href="#logo" fill-rule="evenodd"/></svg>

Output

<svg width="16" height="16" viewBox="0 0 16 16">
  <use xlinkHref="#logo" fillRule="evenodd" />
</svg>

Icon-friendly output

Remove width and height keeps viewBox, so the icon scales to the size you give it, for example with className="size-6".
Spread props adds {...props} to the <svg>, so callers can pass className, onClick or accessibility attributes.
TypeScript types props as React.SVGProps<SVGSVGElement>.

Options

Component: Wrap the SVG in a React component (on by default).
Remove width and height: Drop the fixed size from the root <svg> so it scales; viewBox is kept.
Spread props: Add {...props} to the <svg> so callers can pass attributes.
TypeScript: Type the props as React.SVGProps<SVGSVGElement>.

Limitations

The SVG isn't optimised: metadata from design tools is kept. Remove it before converting if you need a smaller file.
<style> inside the SVG is kept as a string; CSS classes in it still apply globally.

Frequently asked questions

Is my SVG uploaded?

No. The conversion runs in your browser; nothing you paste is sent anywhere.

How do I change the icon's colour?

Use currentColor for fill or stroke in the SVG; the icon then takes the text colour, for example from a className.

Should I import SVG files instead?

Bundler plugins such as SVGR do this conversion at build time. This tool is for one-off icons, or for checking what such a plugin would produce.