更新记录

0.0.8（2022-01-20）

  1. 调整了图标的样式设置为数组形式,自定义更加合理
  2. 不再提供默认颜色,颜色默认由外围容器决定

0.0.7（2021-12-25）

  1. 增加了冒泡bubble设置，不然在组件中使用时无法控制是否冒泡
  2. 移动时位置的信息获取进行了调整
  3. 对文档进行了调整，增加了原组件和图标网站的跳转

0.0.6（2021-11-29）

  1. 移除了touchstart和touchend的阻止冒泡stop修饰符，解决模拟触发click出现行为不一致的问题
查看更多

平台兼容性

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
√ √ √ √ √ × √ √ √

wxy-icon 介绍

基于插件市场i-icon 增强改进而来，这里首先感谢原作者。同时我对官方uni-icons也进行了增强，参考地址https://ext.dcloud.net.cn/plugin?id=6716 二者使用时最大区别就是图标名，uni-icons是type，uni-icon是name，其它没什么区别

访问remixicon官网图标演示

组件改进

  1. 支持设置图标margin，默认是0
  2. 支持点击、长按、触屏事件
  3. 同uni-icons一样支持扩展图标
  4. 支持是否冒泡，并解决了小程序端阻止冒泡时不触发点击的问题

平台兼容性

同i-icon兼容性

参数说明

属性名 类型 默认值 说明
name String - 图标名,官方命名规则:ri-类名-line/fill(线状/填充),本组件引用js已经移除ri前缀,
size Number|String 1em 大小尺寸，增加支持的字符串:%|px|rpx|em|vw|vh|vmax|vmin|auto
color String black 颜色类型，支持rgb()、十六进制或关键字
customPrefix String - 自定义图标
bold Number|String noraml 字体粗细
margin String 0 外边距，margin规范,增加支持的字符串%|px|rpx|em|vw|vh|vmax|vmin|auto，默认单位是px，默认大小是0
bubble Boolean false 是否冒泡，默认是不冒泡
事件称名 说明 返回值
click 点击 Icon 触发事件 event
longpress 长按 Icon 触发事件 event
touchstart 触摸Icon开始触发事件 event
touchmove 触摸Icon移动触发事件 event
touchend 触摸Icon结束触发事件 event

基本使用

简单使用

<wxy-icon name="lock-line"></wxy-icon>

事件冒泡

<wxy-icon name="lock-line" bubble></wxy-icon>

设置大小、边距，支持带单位

<wxy-icon name="contact" size="2vw" margin="5px 10px"></wxy-icon>

扩展图标

<wxy-icon name="biaoqing" custom-prefix="chat"></wxy-icon>

隐私、权限声明

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

无

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

无

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

无

许可协议

MIT协议
评论列表 撰写评论
加载更多...
插件问答 我要提问

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

加载更多...