Skip to content
SvgJsx
Language: English

Convert SVG to a React Component

Turn any SVG icon or illustration into a functional React component with JSX-ready attributes, a props spread and optional size and color props.

Quick presets:
Drop .svg files here orFiles are read locally with FileReader and are never uploaded.
Options
Export:
const HeartIcon = (props) => (
  <svg width="24" height="24" viewBox="0 0 24 24" className="icon icon-heart" {...props}>
    <g id="Layer_1" fill="none" stroke="#e11d48" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style={{ fillOpacity: "0.15", fill: "#e11d48" }} />
    </g>
  </svg>
);

export default HeartIcon;

Preview

Preview of the converted SVG
Original SVG
706B
Optimized SVG
538B(-24%)
Component
566B

Why not paste SVG straight into React?

Pasting raw SVG into a .jsx file usually produces a wall of warnings: "Invalid DOM property stroke-width", "Invalid DOM property class" or a hard compile error when the file contains a style attribute or an XML declaration. Each attribute has to be renamed by hand, which is slow and error-prone for large icon sets.

This converter does the renaming for you and wraps the markup in a component that accepts props. Because {...props} is spread onto the root <svg>, you can pass className, aria-label, onClick or a custom width from the parent without editing the icon again.

Recommended settings for React icons

For a reusable icon component we suggest:

  • Enable currentColor so the icon inherits the text color of its parent and works in dark mode.
  • Enable the size prop to control width and height with a single value such as size={20}.
  • Keep the viewBox and remove fixed width and height so the icon scales with CSS.
  • Use forwardRef only when a parent needs the underlying <svg> element, for example for tooltips or animations.

Inline components vs. image files

Inline SVG components can be styled with CSS, animated, and change color on hover, and they never cause an extra network request. For large illustrations that never change, a plain <img src="/file.svg"> may be cheaper because the browser can cache it separately. Use components for icons and UI graphics, and image tags for heavy artwork.

Frequently asked questions

Which React versions are supported?

The output is a plain function component that works with React 16.8 and newer, including React 18 and 19. forwardRef and memo are optional and imported only when you enable them.

Do I need to import React in the generated file?

No. With the modern JSX transform used by Next.js, Vite and Create React App 4+, React does not have to be in scope. The converter only imports what the component actually uses.

How do I change the icon color from the parent?

Enable the currentColor option. Fills and strokes are replaced with currentColor, so the icon takes the CSS color of its parent, for example a Tailwind text-red-600 class.

Can I pass an onClick or aria-label to the icon?

Yes. The component spreads {...props} onto the root <svg>, so any SVG attribute or event handler you pass is forwarded and overrides the defaults.