更新记录

1.0.0(2020-06-29) 下载此版本

自定义图标


平台兼容性

Icons自定义图标

自定义图标,组件名:icons,代码块: icons

使用方式

script 中引用组件

全局引用,在main.js中引用

复制代码import NavBar from '@/components/lz-icons/icons.vue'
Vue.component("Icons", Icons);

按需引用

复制代码import navBar from "@/components/lz-icons/icons.vue"
export default {
    components: {Icons}
}

template 中使用组件

复制代码<icons type="home" size="28upx" color="#333" @click="clickMe"></icons>

属性说明

属性名 类型 默认值 说明
Type String 图标类型
color String #333 图标类型,参考示例
size String inherit 标题内容

事件说明

事件名 说明 返回值
@click 点击 Icon 触发事件 -

插件预览地址

https://www.iconfont.cn/collections/detail?cid=33

Tips

  • 本组件图标库来源于iconfont官方图标库手机淘宝图标库,作者明飒
  • 图标type命名方式为官方图标库名称修改为驼峰命名,例:like_fill修改为likeFill
  • 设置size大小请自带单位并且默认值为inherit是为了方便与上下文文字大小保持一致,响应式单位建议使用rpx,uni-app 在 App 端、H5 端都支持了 rpx

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议
Feify

2021-04-19

写的案例错误,“NavBar”===》 “Icons”半天直接拿来用了,结果搞懵逼了

sdf***@163.com

2020-11-16

能用的图标太少,希望能添加

j41***@qq.com

2020-09-02

能全部加进来就好了,能用的图标太少

735***@qq.com

2020-08-14

有相同命名的pull_down

背对夕阳 2020-08-19

没有这样的命名,只有pullDown和pullDown1

水域心诚

2020-07-01

支付宝小程序怎么才能支持在线的iconfont呢

背对夕阳 2020-07-01

在App.vue引入@font-face

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