How to Import SVG Files to React + Vite Project (2025)

August 20, 2025

This content originally appeared on DEV Community and was authored by Marina Eremina

When working with React projects in Vite, you may want to import SVGs as React components instead of plain image URLs. The easiest way to achieve this is by using the vite-plugin-svgr plugin.

1. Install the plugin

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

2. Add the plugin to your Vite config (`vite.config.ts`)

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgrPlugin from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [
    react(),
    svgrPlugin(),
  ],
});

3. Import SVG files as React components

Add ?react to the end of your SVG import path:

import LogoSvg from './assets/logo.svg?react';

const Button: React.FC = () => {
  return (
    <button>
      <LogoSvg />
      Click Me
    </button>
  );
};

export default Button;

Now LogoSvg behaves like a regular React component.

4. Adjust for TypeScript

If you are using TypeScript, the line with svg import might show an error like:

Cannot find module './assets/logo.svg?react' or its corresponding type declarations.ts(2307)

To fix this error, in the vite-env.d.ts file add the following line /// <reference types="vite-plugin-svgr/client" />:

/// <reference types="vite/client" />
/// <reference types="vite-plugin-svgr/client" />

This ensures TypeScript recognizes .svg?react imports correctly.

SVG as Component vs. SVG as Image URL

Key Advantages of Importing SVGs as React Components vs. file URL import:

SVGs are part of the DOM, so you can style them with CSS or Tailwind.
You can pass props dinamicaly, like className, width, or fill to customize them.
No extra HTTP requests, since the SVG is inlined.