How to use SVG as React component

ahh, the good old SVG. It’s a great way to create vector graphics for the web. But how do you use it in React? 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.

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 and url-loader:

npm install --save-dev @svgr/webpack url-loader

OR

yarn add --dev @svgr/webpack url-loader

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", "url-loader"],
    })
 
    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. If you are using Vite and want to use SVG as a React component, Then follow these steps:

First, you need to install vite-plugin-svgr:

npm install vite-plugin-svgr

Then, add the plugin to your vite.config.js file:

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

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

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.

Happy coding! 🎀