电力建设期刊网站经常维护吗,php做网站难吗,360建筑网站,wordpress按钮灯箱基于vue3 ant-design 自定义SVG图标iconfont的解决方案#xff1b; ant-design加载本地iconfont.js不显示图标问题 一、准备工作 1、首先去阿里巴巴矢量图标库自定义添加自己的图标#xff1b;网站地址https://www.iconfont.cn/ 整个步骤是#xff1a;选择图标–添加到项…基于vue3 ant-design 自定义SVG图标iconfont的解决方案 ant-design加载本地iconfont.js不显示图标问题 一、准备工作 1、首先去阿里巴巴矢量图标库自定义添加自己的图标网站地址https://www.iconfont.cn/ 整个步骤是选择图标–添加到项目-项目设置-下载到本地 已经选择的图标 下载到本地后iconfont提供三种图标使用的方案分别是Unicode 、Font class、 Symbol本次我们使用Symbol 方式只需要拿到iconfont.js文件放到我们实际项目中即可其他文件是不需要 二、图标使用 1、ant-design官网给的教程方案是如下图 官网教程中对于使用 iconfont.cn 的用户通过设置 createFromIconfontCN 方法参数对象中的 scriptUrl 字段 即可轻松地使用已有项目中的图标。 2、把刚刚从阿里巴巴适量图库中下载到的iconfont.js文件放到项目中我放的文件是项目中src/assets/iconfont/iconfont.js文件下 3、在main.js中使用 // 方案一测试不行、显示本地和云上的都不显示 // import iconfrontjs from ./assets/iconfont/iconfont.js // const IconFont Icon.createFromIconfontCN({ // scriptUrl: iconfrontjs // })// 方案二测试不行、显示本地和云上的都不显示 // import * as iconfontJS from ./assets/iconfont/iconfont.js// 方案三 import { iconFontJS } from /assets/iconfont/iconfont.js const IconFont antIcons.createFromIconfontCN({//scriptUrl: /assets/iconfont/iconfont.js,//掉用本地iconfont.js资源不显示加载不成功本地资源显示不出来图标//scriptUrl: ./assets/iconfont/iconfont.js,//掉用本地iconfont.js资源不显示//scriptUrl: //at.alicdn.com/t/c/font_9229502_ia8wtqn.js,//掉用云上iconfont库资源显示图标scriptUrl: iconFontJS,//掉用本地iconfont.js资源显示图标最终方案 });app.component(IconFont, IconFont); 页面上的使用 IconFont :typeitem.typeSVGIcon/IconFontIconFont :typeitem.typeSVGIcon/IconFont type“图标名称”如IconFont :typeysc_kpi_o/IconFont最终显示效果如图 图标不显示的原因最终找到是因为加载本地资源不成功所以显示不出来在此记录一下问题的解决方案方便后期查阅