Ant Design 图标现在显示

Question

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

Why my label of Icon in antd is not displayed
Why are the icons not showing up on my Ant Design sider?

第二种方案我没试过，因为这是公司的项目，不想擅自升级版本

这是我的代码和导入：

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>

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

Answer 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

Ant Design 图标现在显示

Ant Design Icon now showing

javascript

reactjs

icons

antd