更新记录

1.0(2019-12-21)

基于官方图标组件uni-icon的扩展:可以自由添加自定义图标,同自带图标同时使用。 可以直接覆盖原有components/uni-icon 文件,不影响原有功能


平台兼容性

因为提供插件名称不能和现有官方组件重名,所以把文件名改成my-icon,下载后自行改成uni-icon,或者作为自定义组件my-icon也行。如果使用uni-icon,替换前前先备份原有uni-icon。

使用方式

<uni-icon type="test" prefixClass="my-icon" size="24" color="#368dff"></uni-icon>

prefixClass="my-icon"使用是自定义图标,没有prefixClass属性或者prefixClass="uni-icon"时使用原有图标

如果HBuilderX版本大于2.3.0,要使用 uni-icons(原因:https://ask.dcloud.net.cn/article/36404)

扩展方式

uni-icon组件里的图标,使用的是woff格式,可以在uni-icon.vue文件里看到@font-face src 后面跟着的一串base64字符串,这里面就是图标了。

扩展的方法就是我们在uni-icon.vue添加多一个@font-face,并命名为myicons,myicons里的src带有我们自定义的图标。

    @font-face {
        font-family: myicons;
        font-weight: normal;
        font-style: normal;
        src: url('data:application/x-font-woff2;charset=utf-8;base64,...') format('woff2');
    } 

我们还得加样式来以便调用图标

.my-icon-test:before {
      content: "\e634";
    }

src里woff base64字符串生成方式

我使用的是阿里矢量图标库,在阿里图标库上面选择多个图标后,下载代码,会得到这些图标的各种格式svg/woff/woff2/ttf/css等,而我们这里用到的是iconfont.css文件,编辑文件看到同样有@font-face,里面的

src: url('data:application/x-font-woff2;charset=utf-8;base64,...') format('woff2');

这串代码就是我们要的,替换到uni-icon.vue里的myicons,同时把下面样式内容复制进来(名称要改成my-icon开头)

替换完这两个地方,你就可以使用自定义图标了。

除了阿里图标库,我们也可以使用其它格式转成woff,工具地址:https://transfonter.org/

关于官方组件中使用自定义图标,以uni-nav-bar为例:

需要在uni-nav-bar.vue里添加属性prefixClass

prefixClass: {
                type: String,
                default: 'uni-icon'
            },

uni-nav-bar两个地方用到图标

<uni-icons :color="color" :prefixClass="prefixClass" :type="leftIcon" size="24" />
<uni-icons :type="rightIcon" :prefixClass="prefixClass" :color="color" :size="rightIconSize" />

这样我们在使用uni-nav-bar组件,又想使用自定义图标,只要在调用组件时传入prefixClass=“my-icon”,就可以使用自定义图标。

隐私、权限声明

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

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

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

许可协议

MIT协议

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