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
