在CRA项目中为antd添加自定义SVG图标触发Empty Icon警告如何解决？

antd 的 Icon 组件要求传入的自定义 SVG 组件必须能正确接收并透传 width、height、fill、className 等属性，否则组件会判定传入的内容无效，抛出 Empty Icon 警告。你通过 SVGR 转换得到的 SVG 组件默认可能写死了 SVG 根节点的属性，没有透传外部传入的配置，才会触发这个问题。

方法1：手动包装SVG组件透传属性 #

直接对引入的SVG组件做一层包装，透传所有外部传入的属性即可：

import { ReactComponent as RawTree } from "../assets/images/tree.svg";

// 包装组件透传props
const Tree = (props) => <RawTree {...props} />;

// 正常传入Icon组件使用
<Icon component={Tree} />

方法2：修改SVGR配置自动透传属性 #

如果你是通过 craco 配置 SVGR 实现的 SVG 组件引入，可以修改配置让所有转换出来的SVG组件默认支持透传属性，不需要手动逐个包装：

// craco.config.js
module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 查找处理SVG的规则
      const svgRule = webpackConfig.module.rules.find(rule => rule.test.toString().includes('svg'));
      svgRule.use = [
        {
          loader: '@svgr/webpack',
          options: {
            // 开启属性透传，将外部传入的props添加到SVG根节点
            expandProps: 'end',
            // 移除SVG文件里写死的宽高属性，方便外部控制尺寸
            removeDimensions: true,
            // 保留viewBox属性确保缩放正常
            removeViewBox: false,
          }
        }
      ];
      return webpackConfig;
    }
  }
}

修改配置后重启项目即可直接将引入的SVG组件传给Icon使用。

方法3：直接使用SVG组件（推荐） #

你也可以不用包antd的Icon组件，直接给SVG组件添加antd的图标类名实现相同的样式效果：

import { ReactComponent as Tree } from "../assets/images/tree.svg";

// 直接使用，和antd自带图标样式完全一致
<Tree className="anticon" style={{ fontSize: '16px', color: '#1677ff' }} />

注意：如果你使用的是antd v5版本，官方已经不再推荐通过通用Icon组件传入自定义SVG，直接使用转换后的SVG组件即可。

内容的提问来源于stack exchange，提问作者nerdess