vite-plugin-svgr

Vite plugin to transform SVGs into React components. Uses svgr under the hood.

Installation

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

# yarn
yarn add -D vite-plugin-svgr

# pnpm
pnpm add -D vite-plugin-svgr

Usage

// 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";

If you are using TypeScript, there is also a declaration helper for better type inference. Add the following to vite-env.d.ts:

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

Options

svgr({
  // svgr options: https://react-svgr.com/docs/options/
  svgrOptions: {
    // ...
  },

  // esbuild options, to transform jsx to js
  esbuildOptions: {
    // ...
  },

  // oxc options, used by rolldown / vite 8+
  oxcOptions: {
    // ...
  },

  // A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should include.
  include: "**/*.svg?react",

  //  A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore. By default no files are ignored.
  exclude: "",
});

If you want to enable SVGO you can install @svgr/plugin-svgo and use following options to enable and configure it:

svgr({
  svgrOptions: {
    plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx"],
    svgoConfig: {
      floatPrecision: 2,
    },
  },
  // ...
});

License

MIT