`antd` `@ant-design/icons` cherry-pick

index.js

// Affix

// Alert
export { default as CheckCircleOutline } from '@ant-design/icons/lib/outline/CheckCircleOutline';
export { default as CloseCircleOutline } from '@ant-design/icons/lib/outline/CloseCircleOutline';
export { default as CloseOutline } from '@ant-design/icons/lib/outline/CloseOutline';
export { default as ExclamationCircleOutline } from '@ant-design/icons/lib/outline/ExclamationCircleOutline';
export { default as InfoCircleOutline } from '@ant-design/icons/lib/outline/InfoCircleOutline';

// Avatar

// Button
export { default as LoadingOutline } from '@ant-design/icons/lib/outline/LoadingOutline';

// Card

// Col

// Dropdown
export { default as EllipsisOutline } from '@ant-design/icons/lib/outline/EllipsisOutline';
export { default as RightOutline } from '@ant-design/icons/lib/outline/RightOutline';

// Icon

// Input

// Layout
export { default as BarsOutline } from '@ant-design/icons/lib/outline/BarsOutline';
export { default as LeftOutline } from '@ant-design/icons/lib/outline/LeftOutline';
// export { default as RightOutline } from '@ant-design/icons/lib/outline/RightOutline';

// List

// Menu

// Modal
// export { default as InfoCircleOutline } from '@ant-design/icons/lib/outline/InfoCircleOutline';
// export { default as CheckCircleOutline } from '@ant-design/icons/lib/outline/CheckCircleOutline';
// export { default as CloseCircleOutline } from '@ant-design/icons/lib/outline/CloseCircleOutline';
// export { default as ExclamationCircleOutline } from '@ant-design/icons/lib/outline/ExclamationCircleOutline';
// export { default as CloseOutline } from '@ant-design/icons/lib/outline/CloseOutline';

// Row

// Tooltip

The Alert/Modal/message may need the filled version of icons, so better to add the following:

export { default as CheckCircleFill } from '@ant-design/icons/lib/fill/CheckCircleFill';
export { default as CloseCircleFill } from '@ant-design/icons/lib/fill/CloseCircleFill';
export { default as ExclamationCircleFill } from '@ant-design/icons/lib/fill/ExclamationCircleFill';
export { default as InfoCircleFill } from '@ant-design/icons/lib/fill/InfoCircleFill';

Hey @aprilandjan, thanks for your comment. I haven't used ant design for many months now so I'm not up to date with it. Do you know if antd@4 already fixes this issue? I was on antd@^3.20.3 when I was working on this.

When I was working on this, I actually split up the cherry-picking into multiple files instead of one index.js, ie. what I mentioned about "community effort" here ant-design/ant-design#12011 (comment). If antd still has this issue, then this is why I mentioned maintaining it with the community, since your comment could have been a PR instead.

The structure I had was like this:

antd-cherry-pick-icons
├── affix
│   └── index.ts
├── alert
│   └── index.ts
├── avatar
│   └── index.ts
├── button
│   ├── button.ts
│   └── index.ts
├── card
│   └── index.ts
├── col
│   └── index.ts
├── dropdown
│   ├── dropdown-button.ts
│   ├── dropdown.ts
│   └── index.ts
├── icon
│   ├── IconFont.ts
│   └── index.ts
├── index.ts
├── input
│   ├── Group.ts
│   ├── Input.ts
│   ├── Password.ts
│   ├── Search.ts
│   └── index.ts
├── layout
│   ├── Sider.ts
│   ├── index.ts
│   └── layout.ts
├── list
│   └── index.ts
├── menu
│   └── index.ts
├── modal
│   ├── Modal.ts
│   ├── confirm.ts
│   └── index.ts
├── row
│   └── index.ts
└── tooltip
    └── index.ts

And here's an example of what modal looked like:

I think I figured out the icons used by looking at antd source code.

==> Modal.ts <==
export { default as CloseOutline } from '@ant-design/icons/lib/outline/CloseOutline';

==> confirm.ts <==
export { default as QuestionCircleOutline } from '@ant-design/icons/lib/outline/QuestionCircleOutline';

==> index.ts <==
export * from './confirm';
export * from './Modal';

export { default as CheckCircleOutline } from '@ant-design/icons/lib/outline/CheckCircleOutline';
export { default as CloseCircleOutline } from '@ant-design/icons/lib/outline/CloseCircleOutline';
export { default as ExclamationCircleOutline } from '@ant-design/icons/lib/outline/ExclamationCircleOutline';
export { default as InfoCircleOutline } from '@ant-design/icons/lib/outline/InfoCircleOutline';

In your main cherry-pick file, index.ts, you can have something like:

export * from 'antd-cherry-pick-icons/modal'; // antd cherry-pick maintained by community
export * from './components/modal'; // additional cherry picks you want for your custom modal

Hi, thanks for your quick and detailed response! It seems that with antd@4 we can use babel-plugin-import to do load as needed. But I'm currently maintaining a project with antd@3.x and I found it easier to use webpack alias to resolve the original icon file into our customized file, as you mentioned above.

I did use your gist for last one year, and it works great since then. Bu after we add usage of message component from antd recently, we found that the icons are missing because in some conditions these component will need the filled version of these icons, so I left the comment 😂

@aprilandjan, you're welcome. I'm glad you were able to find it useful.

If I remember correctly, I dug through antd@3.20.3 source code to find icons that were used by searching for <Icon type="..." />. It's not ideal because you have to look through their code and trace their code paths, but it should be thorough. I either might have missed something or antd team might have added some new icons in the latest antd@3.26.18 .

---

Here are some examples of <Icon type="..." /> I used to determine what to cherry-pick:

https://github.com/ant-design/ant-design/blob/3.20.3/components/modal/Modal.tsx#L217
https://github.com/ant-design/ant-design/blob/3.20.3/components/modal/index.tsx#L12-L42

I think type="close" becomes CloseOutline, type="exclamation-circle" becomes ExclamationCircleOutline, type="close-circle" becomes CloseCircleOutline.

---

Some of them set type={icon} to a variable so you have to trace the variable:

https://github.com/ant-design/ant-design/blob/3.20.3/components/modal/confirm.tsx#L76

You can see above that icon defaults to iconType (deprecated), which defaults to 'question-circle':

https://github.com/ant-design/ant-design/blob/3.20.3/components/modal/confirm.tsx#L32-L41

They both can be set from props in props.icon and props.iconType. Since it accepts icons from props, you can have additional icons. I would have cherry-picked the additional icons in my custom ./components/modal modules, since they are not required by antd code itself.

---

So another possibility is that antd doesn't require the icons you listed above, but you are feeding it in through the icon props.