蚂蚁设计图标现在显示答案

【问题标题】：Ant Design Icon now showing蚂蚁设计图标现在显示
【发布时间】：2021-10-20 04:52:27
【问题描述】：

我已尝试寻找有关此问题的解决方案，但无法解决我的问题。这些是我查过的帖子：

我没有尝试过第二种解决方案，因为这是公司的一个项目，我不想在未经任何许可的情况下自行升级版本。

这是我的代码和导入：

import "antd/dist/antd.css";
import {Button} from 'antd';
import {TwitterOutlined} from '@ant-design/icons';    //import icons

//here is where i use the TwitterOutlined which is the icon
<Button type="link" href={links[3]} target="_blank" icon={<TwitterOutlined />}>Twitter</Button>

但是该图标没有显示在按钮内，所以如果有人知道我的导入或任何东西出了什么问题，我将不胜感激。

【问题讨论】：

标签： javascript reactjs icons antd

【解决方案1】：

我已经测试了您的代码，它适用于最新的 antd，因此几乎肯定与您链接的第二个问题中的版本控制情况相同。您可以尝试绕过它by using a custom icon。

import Icon from '@ant-design/icons';

const TwitterSVG = () => (
  <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
    <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549" />
  </svg>
);

// ...
const TwitterIcon = props => <Icon component={TwitterSVG} {...props} />;

// ...
<TwitterIcon style={{ color: '#1DA1F2' }} /> // Twitter's blue

【讨论】：

感谢您的帮助顺便说一句，您从哪里获得 svg 标签中的路径以及如何将 TwitterIcon 包含到我的按钮中
SVG 来自iconmonstr.com/twitter-1-svg。您只需像使用 React 中的任何其他组件一样使用该自定义图标。只需将按钮的图标属性设置为 {}
刚刚发现我只需要使用图标名称而不是从@ant-design/icons导入图标，谢谢你的帮助顺便说一句！欣赏！