一个插件,用于将 SVG 转换为 React 组件
一个插件,用于将 SVG 转换为 React 组件。在后台使用 svgr。
# npm
npm install --save-dev vite-plugin-svgr
# yarn
yarn add -D vite-plugin-svgr
# pnpm
pnpm add -D vite-plugin-svgr// vite.config.js
import svgr from "vite-plugin-svgr";
export default {
// ...
plugins: [svgr()],
};然后,可以将 SVG 文件导入为 React 组件:
import Logo from "./logo.svg?react";如果您使用 TypeScript,还有一个声明辅助工具,可用于更好地推断类型。请将以下内容添加到 vite-env.d.ts:
/// 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: "",
});如果您想启用 SVGO,可以安装 @svgr/plugin-svgo 并使用以下选项来启用和配置它:
svgr({
svgrOptions: {
plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx"],
svgoConfig: {
floatPrecision: 2,
},
},
// ...
});麻省理工学院
暂无开放 Issues，或尚未同步最近议题。