How to Convert SVG to React Components (The Right Way)

In the early days of web development, we treated SVGs exactly like PNGs or JPEGs—we just loaded them via an <img src="icon.svg" /> tag. In a modern React application, this is a massive missed opportunity.

By converting SVGs into native React components, you unlock the ability to dynamically change their colors, resize them on the fly, and even animate their individual paths.

The Problem with the <img> Tag

When you load an SVG using an image tag, the browser treats it as a static external resource. You cannot target the internal paths of the SVG with CSS. For example, if you have a dark mode toggle and want your icons to change from black to white, an <img> tag won't let you use CSS fill: currentColor.

The Solution: SVG as a React Component

By embedding the raw SVG markup directly into your JSX, you can pass standard React props to it.

export default function Icon() {
  return (
    <img 
      src="/icon.svg" 
      alt="User Profile" 
    />
  );
}

export default function UserIcon({ 
  className 
}: { className?: string }) {
  return (
    <svg 
      className={className} 
      viewBox="0 0 24 24" 
      fill="currentColor"
    >
      <path d="..." />
    </svg>
  );
}

How to Convert Them

Converting a raw SVG string into a React component requires a few manual steps:

1. Wrap the SVG in a React functional component.
2. Convert all kebab-case HTML attributes (like stroke-width) to camelCase (strokeWidth) so React doesn't throw console errors.
3. Replace hardcoded colors with currentColor to allow CSS classes (like Tailwind's text-indigo-500) to control the color.
4. Pass the ...props spread operator to the root SVG element.