DEV Community

Cover image for How to Import SVG Files to React + Vite Project (2025)
Marina Eremina
Marina Eremina

Posted on

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

#react #vite #svg #webdev

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
Enter fullscreen mode Exit fullscreen mode

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(),
  ],
});
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)