vite-plugin-svgr

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: {
    // ...
  },

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

Similar packages

Other packages similar to vite-plugin-svgr

@svgr/webpack

Similar to vite-plugin-svgr, @svgr/webpack allows you to import SVGs as React components in projects using Webpack. While vite-plugin-svgr is tailored for Vite projects, @svgr/webpack is designed for those that are built with Webpack, offering similar functionalities in terms of importing and customizing SVGs.

react-svg-loader

react-svg-loader provides functionality similar to vite-plugin-svgr by allowing SVGs to be imported as React components. However, it is another tool that integrates with Webpack. The main difference lies in the implementation and configuration specifics, with react-svg-loader offering its own set of options and features for handling SVGs in React projects.