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

灰色人生qwer

于 2024-12-16 15:25:38 发布

阅读量419

点赞数 1

文章标签： react.js 前端前端框架

本文链接：https://blog.youkuaiyun.com/z284747/article/details/144509740

版权

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

import { ReactComponent as RotateRight } from 'assets/images/xxx/icon_img_rotate+90_default.svg';

const tools = [
    {
      Icon: RotateRight,
      onClick: onRotateRight,
      type: 'rotateRight',
    }
]

原因：
Webpack 配置或缺少插件，我使用的是自定义 Webpack 配置，发现没有配置 @svgr/webpack 插件。

解决：

我使用的版本是 “webpack”: “^4.41.5”,“react”: “^17.0.2”，下载兼容的@svgr/webpack插件版本。

yarn add @svgr/webpack@5 --dev

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

const path = require('path');
const loaderUtils = require('loader-utils');

module.exports = {
  // 其他配置...

  module: {
    rules: [
      // 处理SVG图标为React组件的规则
      {
        test: /\.svg$/,
        issuer: /\.[jt]sx?$/, // 确保只对JSX/TSX文件中的SVG应用此规则
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              svgoConfig: {
                plugins: [{ removeViewBox: false }],
              },
              // 你可以在这里添加更多 @svgr/webpack 的选项
            },
          },
        ],
      },

      // 如果你还想保持原来的SVG文件加载方式（例如，通过import引入作为URL）
      // 你可以添加另一个规则来处理这些情况：
      {
        test: /\.svg$/,
        exclude: /node_modules/,
        use: ['url-loader'], // 或者 file-loader, 根据你的需求选择
      },
    ],
  },

  // 其他配置...
};

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

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}