更新记录
1.0.1(2024-02-26) 下载此版本
1、基于uv-custom-icon重构,优化uv-custom-icon不支持直接使用iconfont中name属性的问题,增强自定义图标的可阅读性。
1.0.0(2024-02-26) 下载此版本
1、基于uv-custom-icon重构,优化uv-custom-icon不支持直接使用iconfont中name属性的问题,增强自定义图标的可阅读性。
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 app-vue app-nvue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | √ | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
CustomIcon 扩展自定义图标库(兼容nvue)
当前插件源自uv-ui提供的uv-custom-icon,在原版本的基础上,兼容uv-custom-icon不支持直接使用name属性的问题,感谢uv-ui作者的开源奉献,为开源点赞。
注意:当前插件依赖uv-ui,使用前请先集成uv-ui。
基础说明
我们假定您一个项目中,需要扩展多个图标,所以您应该把各个图标收集进一个阿里图标库的项目中,即使您后面不断的扩展图标,也能让它们在同一个库中。
一般情况下,我们建议您在收藏的项目中,使用"下载至本地"的功能,而后解压,复制文件夹中的全部文件至uni-app项目@/static/iconfont目录中
下面的操作默认您已进入阿里图标库的"图标管理"栏目中
1、我们建议,您应该修改这个图标的前缀,这样以后有新图标加入的时候,不用每次频繁修改前缀,在右上角的"项目设置",进入"编辑项目":
2、修改"FontClass/Symbol 前缀"项为"custom-icon-",修改"Font Family"为"custom-icon",字体格式勾选WOFF2、WOFF、TTF、Base64,如下图:
3、下载项目至本地
4、复制下方目录中所有文件到项目的@/static/iconfont目录下
5、打开@/static/iconfont/iconfont.json复制对应字体的name值
或者打开demo_index.html复制unicode的字体名称
6、最后就是使用图标,name属性需要传入unicode码,如下:
<yu-custom-icon name="菜单顺序"></yu-custom-icon>