Ant Design引入的Icon图标在Button组件内不显示问题求助

可能的原因及对应解决方案 #

1. Ant Design 版本与图标包不匹配

这是概率最高的原因：@ant-design/icons 是 Ant Design 4.x 及以上版本才拆分出来的独立图标包，如果你当前项目使用的是 3.x 及更低版本的 Ant Design，直接导入该独立包的图标无法正常渲染。
低版本 Ant Design 要使用图标请按以下方式调整代码：

// 导入方式改为从antd直接引入Icon组件
import "antd/dist/antd.css";
import { Button, Icon } from 'antd';

// 使用时通过type指定图标名
<Button type="link" href={links[3]} target="_blank" icon={<Icon type="twitter" />}>Twitter</Button>

2. 图标依赖未正确安装

如果你确认项目使用的是 Ant Design 4.x 及以上版本，先检查是否已经安装了@ant-design/icons依赖，可在项目根目录执行命令npm ls @ant-design/icons查看安装状态，如果未安装，走公司内部合规流程申请安装对应适配版本的依赖即可。

3. 样式被覆盖

如果打开浏览器开发者工具能在按钮位置看到对应图标生成的SVG DOM，但页面上看不见，说明图标样式被自定义样式覆盖。可添加以下样式强制修复：

.ant-btn-icon svg {
  display: inline-block !important;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

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