How to Convert SVG to React Component

Working with icons and graphics is part of almost every React project I’ve handled over the years. One of the most common formats I receive from designers is SVG (Scalable Vector Graphics).

At first, I used SVGs as plain image files. But soon I realized that converting them into React components gave me more flexibility. I could change colors, sizes, and even animate them directly with props.

In this tutorial, I’ll show you the exact methods I use to convert SVG into React component.
I’ll walk you through multiple approaches: from the simplest built-in way to more advanced tools like SVGR.

Table of Contents

Why Convert SVG into a React Component?

Before jumping into the methods, let me quickly explain why I prefer this approach.

Dynamic Styling: I can pass props to change the color, size, or stroke of an SVG.
Performance: SVGs are lightweight and scale perfectly on different screen sizes.
Reusability: Once converted, I can reuse the component across multiple parts of my project.
Accessibility: Adding title or aria-label props makes them screen-reader friendly.

Method 1 – Import SVG as a React Component (Create React App or Vite)

In modern React setups like Create React App v2+ or Vite, you can directly import an SVG as a component.

Here’s how I usually do it:

// App.js
import React from "react";
import { ReactComponent as UsaFlag } from "./usa-flag.svg";

function App() {
  return (
    <div>
      <h1>Welcome to My React App</h1>
      <UsaFlag width={100} height={100} fill="blue" />
    </div>
  );
}

export default App;

I executed the above example code and added the screenshot below.

The ReactComponent import syntax allows you to use your SVG just like a component.
You can pass props like width, height, and fill to modify the SVG dynamically.

This method works best when you’re using a modern React setup.

Method 2 – Inline SVG as JSX

Sometimes, I don’t want to import an external file. Instead, I copy the SVG code directly into my component.

Here’s an example:

// InlineSvg.js
import React from "react";

function InlineSvg({ color = "red", size = 50 }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill={color}
    >
      <path d="M12 2L15 8H9L12 2ZM12 22L9 16H15L12 22Z" />
    </svg>
  );
}

export default InlineSvg;

I executed the above example code and added the screenshot below.

I copied the raw SVG code into JSX format.
By passing color and size as props, I can control the look of the SVG at runtime.

This method is quick and doesn’t require extra configuration.

Method 3 – Use SVGR (Recommended for Larger Projects)

When I work on enterprise-level projects with dozens of icons, I rely on SVGR. It’s a tool that automatically converts SVG files into React components.

Step 1: Install SVGR

npm install @svgr/cli --save-dev

Step 2: Run the Conversion

npx @svgr/cli --out-dir src/icons src/assets

This command converts all SVG files in src/assets into React components inside src/icons.

Step 3: Use the Generated Component

// App.js
import React from "react";
import UsaMap from "./icons/usa-map";

function App() {
  return (
    <div>
      <h2>SVG with SVGR</h2>
      <UsaMap width={200} height={200} fill="green" />
    </div>
  );
}

export default App;

SVGR automatically transforms SVG into reusable React components.
I can then import them just like any other component and style them with props.

This method is perfect when you have a large library of SVGs to manage.

Method 4 – Dynamic SVG with Props and Conditional Styles

Sometimes, I want my SVG to change appearance based on user interaction.
Here’s how I handle that with props:

// DynamicSvg.js
import React from "react";

function DynamicSvg({ isActive }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="80"
      height="80"
      viewBox="0 0 24 24"
      fill={isActive ? "blue" : "gray"}
    >
      <circle cx="12" cy="12" r="10" />
    </svg>
  );
}

export default DynamicSvg;

I used a prop isActive to conditionally change the fill color.
This makes the component interactive, which is great for buttons or toggles.

Method 5 – Use Styled Components with SVG

If you’re already using styled-components, you can easily style your SVGs.

// StyledSvg.js
import React from "react";
import styled from "styled-components";

const StyledIcon = styled.svg`
  width: ${(props) => props.size || "40px"};
  height: ${(props) => props.size || "40px"};
  fill: ${(props) => props.color || "black"};
`;

function StyledSvg({ size, color }) {
  return (
    <StyledIcon size={size} color={color} viewBox="0 0 24 24">
      <path d="M3 12h18M12 3v18" />
    </StyledIcon>
  );
}

export default StyledSvg;

I wrapped the SVG in a styled component.
This allows me to control its size and color using props while keeping the styles clean.

Best Practices I Follow

Over the years, I’ve learned a few best practices when handling SVGs in React:

Optimize SVGs: Use tools like SVGO to remove unnecessary attributes.
Keep Accessibility in Mind: Add role=”img” and aria-label for screen readers.
Use Props for Flexibility: Always allow size and color props for reusability.
Organize Icons: Store all SVG components in a dedicated icons/ folder.

Working with SVGs in React doesn’t have to be complicated.
I’ve shown you five methods that I personally use depending on the project size and requirements.

If you’re working on a small project, importing SVG directly or inlining it works perfectly.
For larger projects, SVGR is the way to go.
And if you want dynamic styling, props, and styled-components, make it easy.

Try out these methods in your own React apps. Once you start using SVG as components, you’ll never want to go back to plain image tags.