`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

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.