How to use SVG as React component

SVGs are the backbone of modern web graphics - scalable, lightweight, and perfect for responsive design. But when it comes to React, many developers struggle with the transition from using SVGs as static images to leveraging them as dynamic, interactive components.

In this blog, I’ll show you how to transform your SVG files into powerful React components that can be styled, animated, and manipulated programmatically. Whether you’re using Create React App, Next.js (with Webpack or Turbopack), or Vite, you’ll find the perfect solution for your setup.

Why we need to use SVG as a React component? 😎

• Performance: SVG as a React component is faster than using it as an image.
• Dynamic: You can easily change the color, size, and other properties of the SVG component.
• Accessibility: You can add aria-label, role, and other accessibility attributes to the SVG component.

For Create React App 🗿

To use SVG as a React component in a basic CRA Application, you can simply import the SVG file and use it as a component.

Here’s an example:

import { ReactComponent as Logo } from './path/to/logo.svg'
 
const App = () => {
  return (
    <div>
      <Logo
        style={{ width: 100, height: 100 }}
        strokeWidth={2}
        stroke='black'
        onClick={() => alert('Clicked!')}
      />
    </div>
  )
}

Fixing SVG Import Issue in TypeScript 🛠️

If you are using Typescript, you might get an error when you try to import the SVG file. To fix this, you can create a svg.d.ts file in the root of your project and add the following code:

declare module '*.svg' {
  import React from 'react'
  export const ReactComponent: React.FunctionComponent<
    React.SVGProps<SVGSVGElement>
  >
}

For Next.js 💫

So if you are using Next.js , and you want to use SVG as a React component, you need to add a custom webpack configuration to handle SVG files. For that you need to first install @svgr/webpack:

npm install --save-dev @svgr/webpack

OR

yarn add --dev @svgr/webpack

With Webpack

Then, make some changes in your next.config.mjs file:

// eslint-disable-next-line import/no-anonymous-default-export
export default {
  webpack: (config) => {
    // Add rule for SVG files
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    })
 
    return config
  },
  images: {},
}

With Turbopack

If you are using Turbopack  in your Next.js project, you can use the following configuration:

 turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.tsx',
      },
    },
  },
 

Then you can import the SVG file and use it as a component:

import React from 'react'
 
import { ReactComponent as MailIcon } from './path/to/mail.svg' //only works with webpack
import MailIcon from './path/to/mail.svg' //works with webpack(may be) and turbopack
 
function Page() {
  return (
    <div>
      <MailIcon strokeWidth={1.2} />
    </div>
  )
}
 
export default Page

For Vite ⚡

We all know that Vite  is a blazing fast frontend build tool that is used to build modern web projects. And if you are using Vite and want to use SVG as a React component, Then follow these steps:

npm install --save-dev vite-plugin-svgr

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import svgr from 'vite-plugin-svgr'
 
export default defineConfig({
  plugins: [
    react(),
    svgr({
      svgrOptions: {
        exportType: 'named',
        ref: true,
        svgo: false,
        titleProp: true,
      },
      include: '**/*.svg',
    }),
  ],
})

import React from 'react'
 
import { ReactComponent as MailIcon } from './path/to/mail.svg'
 
function App() {
  return (
    <div>
      <MailIcon strokeWidth={1.2} />
    </div>
  )
}
 
export default App

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import svgr from 'vite-plugin-svgr'
 
export default defineConfig({
  plugins: [react(), svgr()],
})

import MailIcon from './path/to/mail.svg?react'
 
function App() {
  return (
    <div>
      <MailIcon strokeWidth={1.2} />
    </div>
  )
}
 
export default App

And that’s it! You can now use SVG as a React component in your Vite project.

Happy coding! 🎀