How to use SVG as React component

Ahh, the good old SVG. It’s a great way to create vector graphics. But how do you use it in React as a component not as an image? Well, it’s actually quite simple.

So today, I’m going to show you how to use SVG as a React component in your project and we will also see how to use it in a Next.js or vite project.

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>
  >
}

You always have to create svg.d.ts file if you are using Typescript in your project. It doesn’t matter if you are using CRA , Next.js , or Vite .

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

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: {},
}

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'
 
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! 🎀