本文介绍如何在Vue3项目中，特别是在使用Ant Design Vue 1.2.0及以上版本时，通过`createFromIconfontCN`方法来支持iconfont图标库。教程包括了编写通用方法来动态引入图标，并展示了在组件和页面中使用iconfont图标的步骤，最终实现了在项目中的实际应用效果。
本教程讲解的是基于Vue3和Ant Design Vue，前面讲了Vue3项目动态引入iconfont（阿里巴巴矢量图标库），这种这种写法只适用部分情况，现在我们又有了一个新的需求，就是在菜单里面使用iconfont图标，Ant Design Vue在 1.2.0 之后，使用了 SVG 图标替换了原先的 font 图标，之前a-icon这种写法已经在新的版本中不适用了，就需要换种方式解决。
官方已经提供在新版本使用iconfont图标库的方式，就是通过设置 createFromIconfontCN 方法参数对象中的 scriptUrl 字段， 即可轻松地使用已有项目中的图标。，那我们就在项目实战上，实现iconfont图标库的使用。
1 编写通用方法
教程是基于前面的Vue3项目动态引入iconfont（阿里巴巴矢量图标库），所以本次功能也加载同一个文件里。只在原来基础上加了几句代码，导入createFromIconfontCN，导出IconFont 。
**
* 阿里iconfont配置
**/
import { createFromIconfontCN } from '@ant-design/icons-vue';
// 定义iconfont库
let iconfontVersion =
最低0.47元/天 解锁文章
1476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
