Transform SVGs into React components using svgr as vite plugin

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

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

// vite.config.js

import svgr from "vite-plugin-svgr";

export default {

// ...

plugins: [svgr()],

};

// vite.config.js import svgr from "vite-plugin-svgr"; export default { // ... plugins: [svgr()], };

// vite.config.js
import svgr from "vite-plugin-svgr";

export default {
  // ...
  plugins: [svgr()],
};

Then SVG files can be imported as React components:

import Logo from "./logo.svg?react";

import Logo from "./logo.svg?react";

If you are using TypeScript, there is also a declaration helper for better type inference:

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

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

References
https://www.npmjs.com/package/vite-plugin-svgr