在antd icon动态打包加载的时候，发现antd的message的icon无法显示，该如何解决？

Question

问题描述

在antd icon动态打包加载的时候，发现antd的message的icon无法显示，该如何解决？

问题出现的环境背景及自己尝试过哪些方法

看了antd的源码，message的icon就是引用的icon里面的index.js，为什么项目里面Icon的图标能正常显示，而message的就无法显示呢

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

alias: {
   '@ant-design/icons/lib/dist$': path.resolve(__dirname, '../src/icons.js')
 }
 <Icon type="user">//能正常显示icon
  message.success('')//success的icon不能正常显示

你期待的结果是什么？实际看到的错误信息又是什么？

<Icon type="user">//能正常显示icon
 message.success('')//success的icon不能正常显示

源码内引用的是同一个Icon模块的index.js 为什么会出现这种情况，应该如何解决

Answer 1

操作没有问题，但有可能是你把Message中用到的图标排除了，请注意
node_modules\ant-design-vue\es\message\index.js 文件中

    info: 'info-circle',
    success: 'check-circle',
    error: 'close-circle',
    warning: 'exclamation-circle',
    loading: 'loading'

除了Loading是Outline以外，其它的都是Fill的样式

Answer 2

试试

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