首页 Umi 4.0 中使用@svgr/webpack怎么在config.ts里配置

Umi 4.0 中使用@svgr/webpack怎么在config.ts里配置

时间: 2025-02-09 10:14:41 浏览: 139

在 Umi 4.0 中使用 `@svgr/webpack` 进行 SVG 图形转换（例如将SVG转为React组件），你需要在项目的 `umi.config.ts` 或者是 `umirc.js` （如果使用的是基于配置文件的方式）中配置这个插件。这里是一个基本的例子：首先，确保已经安装了必要的依赖： ```bash npm install @svgr/webpack svgo webpack-plugin-optimize-images ``` 然后，在 `umi.config.ts` 文件中添加以下配置: ```typescript import { addWebpackAlias } from '@umijs/plugin-webpack'; import SVGRPlugin from '@svgr/webpack'; // 添加SVGR配置到webpack配置 export default ({ chainWebpack: (config) => { config.module.rule('svg') .test(/\.svg$/) .use(SVGRPlugin) .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }); // 自定义生成符号id // 如果你想优化SVG图片，可以加上优化插件 config.optimization.usedExports('svg').include.add(resolve(__dirname, './src/svg')); // 根据项目结构调整此路径 // 如果你的项目使用Eslint，可能会遇到TS编译错误，可以添加别名解决导入问题 addWebpackAlias(config, { '@svg': path.resolve(__dirname, './src/svg'), }); }, }); ``` 在这个配置中，`SVGRPlugin` 用于处理SVG转React组件，`symbolId` 参数控制生成的符号ID。`optimization.usedExports` 可能用来优化引入的SVG图片。如果你使用 `umirc.js`，配置会类似，只是文件不同： ```javascript module.exports = { plugins: [ ['@svgr/webpack', { alias: '@/svg' }], ], }; ``` 记得在你的项目中按需引用和导入转换后的SVG组件。

阅读全文