更新记录

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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问