Recently, while working on a React project for a U.S.-based client, I had to deal with dozens of SVG icons, everything from payment logos to social media icons.
At first, I was simply importing them as image files, but soon I realized that wasn’t scalable. I needed a cleaner, reusable way to manage SVGs as React components.
If you’ve ever faced the same challenge, you’re in the right place. In this tutorial, I’ll show you three simple methods to import SVGs as React components, the same techniques I use in production apps every day.
Method 1 – Import SVG Using SVGR (Recommended)
This is my go-to method. SVGR is a fantastic tool that converts SVG files into React components automatically. It’s fast, reliable, and works perfectly with modern React setups like Create React App, Vite, or Next.js.
Step 1: Install SVGR
If you’re using Create React App (CRA), SVGR is already built in. But if you’re setting up a custom project, install it manually:
npm install @svgr/webpack --save-devIf you’re using Vite, you can use the SVGR plugin:
npm install vite-plugin-svgr --save-devThen, update your vite.config.js file:
import svgr from "vite-plugin-svgr";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react(), svgr()],
});Step 2: Import SVG as a Component
Once SVGR is configured, you can import your SVG directly as a React component.
import React from "react";
import { ReactComponent as USAFlag } from "./usa-flag.svg";
function App() {
return (
<div style={{ textAlign: "center", marginTop: "50px" }}>
<h2>Welcome to Our USA Dashboard</h2>
<USAFlag width={120} height={80} />
</div>
);
}
export default App;I executed the above example code and added the screenshot below.
You can now treat your SVG like any other React component, pass props, style it, or even animate it.
Method 2 – Inline SVG in React
Sometimes, I prefer to copy the SVG markup directly into my component. This gives me full control over styling and animations without any imports.
Here’s how I do it.
import React from "react";
function InlineLogo() {
return (
<div style={{ textAlign: "center", marginTop: "40px" }}>
<h3>Company Logo</h3>
<svg
xmlns="http://www.w3.org/2000/svg"
width="150"
height="150"
viewBox="0 0 24 24"
fill="none"
stroke="blue"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx="12" cy="12" r="10" />
<path d="M14.31 8l5.74 9.94" />
<path d="M9.69 8h11.48" />
<path d="M7.38 12l5.74-9.94" />
<path d="M9.69 16L3.95 6.06" />
<path d="M14.31 16H2.83" />
<path d="M16.62 12l-5.74 9.94" />
</svg>
</div>
);
}
export default InlineLogo;I executed the above example code and added the screenshot below.
This method is great when you only need a few SVGs and want to tweak them directly in your JSX. You can even change the color dynamically using props or React state.
Method 3 – Convert SVG to React Component Manually
If you prefer not to add plugins or dependencies, you can manually convert SVG into a React component. I’ve done this a few times when working on lightweight projects that didn’t need a build tool.
Here’s a simple way to do it:
- Open your SVG file in a text editor.
- Copy the SVG markup.
- Paste it into a new React component file.
Example:
import React from "react";
const PaymentIcon = (props) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={props.width || "50"}
height={props.height || "50"}
viewBox="0 0 24 24"
fill={props.fill || "none"}
stroke={props.stroke || "green"}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
<line x1="1" y1="10" x2="23" y2="10" />
</svg>
);
export default PaymentIcon;Now you can use it anywhere:
import React from "react";
import PaymentIcon from "./PaymentIcon";
function App() {
return (
<div style={{ textAlign: "center", marginTop: "50px" }}>
<h2>Secure Payments Accepted</h2>
<PaymentIcon stroke="blue" width="100" height="100" />
</div>
);
}
export default App;I executed the above example code and added the screenshot below.
This method gives you complete flexibility, no external libraries, no build configuration, just pure React.
Bonus Tip – Optimize SVG Before Importing
Before importing SVG files into your React app, I always recommend optimizing them. You can use online tools like SVGOMG or command-line tools like SVGO.
npm install -g svgo
svgo my-icon.svgThis reduces file size and removes unnecessary attributes, making your app faster to load, especially important for U.S.-based users who expect lightning-fast performance.
Common Issues and Fixes
1. SVG not rendering properly?
Make sure your SVG doesn’t have invalid attributes like class (use className instead).
2. Getting an “Unexpected token” error?
That usually means your bundler isn’t configured to handle SVG imports. Install and configure SVGR as shown above.
3. SVG colors not changing with CSS?
Ensure your SVG uses fill=”currentColor” or stroke=”currentColor”. That way, it inherits color from your CSS.
Importing SVGs as React components has completely changed how I manage icons and graphics in my projects. It keeps my code cleaner, improves reusability, and makes styling much easier.
Whether you use SVGR, inline SVG, or manual conversion, each method has its place.
For production-grade apps, I personally recommend SVGR; it’s efficient, scalable, and works beautifully with modern React setups.
You may read:
- React Component Refactoring Best Practice
- Pass Parameters to Components in React
- Build a Dynamic Star Rating Component in React
- How to Use a React Time Picker Component
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
