React 项目引入 svg 图片为 undefined 情况

如下面这段代码，发现加载 tools 的时候， Icon 对应的 RotateRight 为 unfined, 但是svg图片的路径是精确的。

1. import { ReactComponent as RotateRight } from 'assets/images/xxx/icon_img_rotate+90_default.svg';
3. const tools = [
4.     {
5.       Icon: RotateRight,
6.       onClick: onRotateRight,
7.       type: 'rotateRight',
8.     }
9. ]

复制代码

缘故原由：
Webpack 配置或缺少插件，我使用的是自定义 Webpack 配置，发现没有配置 @svgr/webpack 插件。
解决：
我使用的 版本是 “webpack”: “^4.41.5”,“react”: “^17.0.2”，下载兼容的@svgr/webpack插件版本。

1. yarn add @svgr/webpack@5 --dev

复制代码

在 Webpack 配置中，配置 @svgr/webpack

1. const path = require('path');
2. const loaderUtils = require('loader-utils');
4. module.exports = {
5.   // 其他配置...
7.   module: {
8.     rules: [
9.       // 处理SVG图标为React组件的规则
10.       {
11.         test: /\.svg$/,
12.         issuer: /\.[jt]sx?$/, // 确保只对JSX/TSX文件中的SVG应用此规则
13.         use: [
14.           {
15.             loader: '@svgr/webpack',
16.             options: {
17.               svgoConfig: {
18.                 plugins: [{ removeViewBox: false }],
19.               },
20.               // 你可以在这里添加更多 @svgr/webpack 的选项
21.             },
22.           },
23.         ],
24.       },
26.       // 如果你还想保持原来的SVG文件加载方式（例如，通过import引入作为URL）
27.       // 你可以添加另一个规则来处理这些情况：
28.       {
29.         test: /\.svg$/,
30.         exclude: /node_modules/,
31.         use: ['url-loader'], // 或者 file-loader, 根据你的需求选择
32.       },
33.     ],
34.   },
36.   // 其他配置...
37. };

复制代码

假如使用的是 Babel 编译 JavaScript 文件，在 .babelrc 文件中配置下面代码

1. {
2.   "presets": ["@babel/preset-env", "@babel/preset-react"]
3. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。