Vite plugin to transform SVGs into React components
npm install vite-plugin-svgr
Vite plugin to transform SVGs into React components. Uses svgr under the hood.
``shnpm
npm install --save-dev vite-plugin-svgr
Usage
`js
// vite.config.js
import svgr from "vite-plugin-svgr";export default {
// ...
plugins: [svgr()],
};
`Then SVG files can be imported as React components:
`js
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:`ts
///
`$3
`js
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:`js
svgr({
svgrOptions: {
plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx"],
svgoConfig: {
floatPrecision: 2,
},
},
// ...
});
``MIT