项目中引入icon代码报错 export ‘Icon‘ (imported as ‘Icon‘) was not found in ‘antd‘

原创已于 2023-01-05 19:03:56 修改 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html5

于 2023-01-05 18:59:57 首次发布

Vue 专栏收录该内容

1 篇文章

订阅专栏

升级AntDesign至v4后，旧版Icon使用方式被废弃，但可通过兼容包继续使用。可以使用`createFromIconfontCN`方法来自定义font图标，该方法在iconfont.cn上生成scriptUrl。若遇到问题，官方文档是重要的参考资源。

Ant Design 从 v3 升级到 v4 导致

图标升级（点击可查看文档），旧版 Icon 使用方式将被废弃，你将仍然可以通过兼容包继续使用：

import { Icon } from '@ant-design/compatible';
 
运行时如果没有安装包，运行指令 yarn add  @ant-design/compatible
 
再重新运行代码就可以了

上面的方法不太行

自定义 font 图标 #

在 1.2.0 之后，我们提供了一个 createFromIconfontCN 方法，方便开发者调用在 iconfont.cn 上自行管理的图标。

ant-design-vue 三的版本升级

import { createFromIconfontCN } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
});

export default defineComponent({
  setup() {
    return () => <MyIcon type="icon-dianzan" />;
  },
});