Ant Design Icon now showing

user_11146006 0
Viewed 825

I've tried looking for solutions regarding this issue but nothing to have solve my problem with this. These are the posts I've looked up :

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

I've not tried the second solution as this is a project in a company and I do not want to upgrade the version on my own without any permission.

Here's my code and imports:

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>

But the icon isn't showing up inside the button so I would appreciate if anyone knows what is exactly wrong with my imports or anything.

antd reactjs icons javascript
1 Answers

I've tested your code and it works with the latest antd, so almost definitely the same versioning situation as in that second question you linked. You can try getting around it 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
user_85946350
Related