返回介绍

开发指南

组件

JS

模板

Icon 图标

发布于 2021-04-03 05:35:24 字数 14984 浏览 1120 评论 0 收藏 0

Icon 图标 平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

基本使用


提示

如果您觉得内置的图标数量不够,或者不合符您的需求,别担心,我们还精心为您准备了一份简单易用的扩展自定义图标库教程:扩展自定义图标库


通过<u-icon>形式来调用,设置name参数为图标名即可

<u-icon name="photo"></u-icon>

修改图标的样式

  • 通过color参数修改图标的颜色
  • 通过size参数修改图标的大小,单位为rpx
<u-icon name="photo" color="#2979ff" size="28"></u-icon>

图片图标 1.3.0

这里说的图片图标,指的是小图标,起作用定位为"icon"图标作用,而非大尺寸的图片展示场景,理论上,这个小图标应该为png格式的正方形图标。

上面说到,给组件的name参数传入一个图片的名称即可显示字体图标,这些名称中不能带有/斜杠符号,否则会被认为是传入了图片图标,同时,size参数 也被设置为这个图片图标的宽度,由于是图片,诸如颜色color等参数都会失效。

<u-icon label="uView" size="40" name="https://www.wenjiangs.com/wp-content/uploads/2021/docimg5/button.png"></u-icon>

API

Props

参数说明类型默认值可选值
name图标名称,见示例图标集,如名称带有/,会被认为是图片图标String--
color图标颜色Stringinherit-
size图标字体大小,单位rpxString | Numberinherit-
index一个用于区分多个图标的值,点击图标时通过click事件传出String--
hover-class图标按下去的样式类,用法同uni的view组件的hover-class参数,详见:hover-classString--
label图标右侧/下方的label文字String--
label-sizelabel字体大小,单位rpxString | Number28-
label-colorlabel字体颜色String#606266-
custom-prefix自定义字体图标库时,需要写上此值,详见:扩展自定义图标库Stringuicon-
margin-leftlabel在右方时与图标的距离,单位rpxString | Number6-
margin-toplabel在下方时与图标的距离,单位rpxString | Number6-
margin-bottom 1.4.1label在上方时与图标的距离,单位rpxString | Number6-
margin-right 1.4.1label在左侧时与图标的距离,单位rpxString | Number6-
label-poslabel相对于图标的位置(left和top为1.4.1新增)Stringrightbottom / top / left
custom-style 1.3.0图标的样式,可以设置字体大小,颜色等,对象形式,sizecolor优先级高于此参数Object--
width 1.5.6name为图片路径时图片的宽度,单位任意,数值默认为rpx单位String | Number--
height 1.5.6name为图片路径时图片的高度,单位任意,数值默认为rpx单位String | Number--
top 1.5.6如果某些场景,如果图标没有垂直居中,可以调整此参数,单位任意,数值默认为rpx单位String | Number0-
show-decimal-icon 1.7.2是否为DecimalIconBooleanfalsetrue
inactive-color 1.7.2背景颜色,可接受主题色,仅Decimal时有效String#ececec-
percent 1.7.2显示的百分比,仅Decimal时有效String | Number50-

Events

事件名说明回调参数版本
click点击图标时触发index: 通过props传递的index-

图标集

level woman man arrow-left-double arrow-right-double chat chat-fill red-packet red-packet-fill order checkbox-mark arrow-up-fill arrow-down-fill backspace photo photo-fill lock lock-fill lock-open lock-opened-fill hourglass hourglass-half-fill home home-fill fingerprint cut star star-fill share share-fill volume-up volume-up-fill volume-off volume-off-fill trash trash-fill rewind-right rewind-right-fill rewind-left rewind-left-fill shopping-cart shopping-cart-fill question question-circle question-circle-fill plus plus-circle plus-circle-fill tags tags-fill pause pause-circle pause-circle-fill play-circle play-circle-fill map map-fill phone phone-fill list list-dot man-delete man-add man-add-fill person-delete-fill info info-circle info-circle-fill minus minus-circle minus-circle-fill mic mic-off grid grid-fill eye eye-fill eye-off file-text file-text-fill edit-pen edit-pen-fill email email-fill download checkmark checkmark-circle checkmark-circle-fill clock clock-fill close close-circle close-circle-fill calendar calendar-fill car car-fill bell bell-fill bookmark bookmark-fill attach play-right play-right-fill play-left play-left-fill error error-circle error-circle-fill wifi wifi-off skip-back-left skip-forward-right search setting setting-fill volume volume-fill more-dot-fill more-circle more-circle-fill bag bag-fill arrow-upward arrow-downward arrow-leftward arrow-rightward arrow-up arrow-down arrow-left arrow-right rmb rmb-circle rmb-circle-fill thumb-up thumb-up-fill thumb-down thumb-down-fill coupon coupon-fill kefu-ermai server-fill server-man scan warning warning-fill google google-circle-fill chrome-circle-fill ie IE-circle-fill github-circle-fill android-fill android-circle-fill apple-fill camera camera-fill pushpin pushpin-fill minus-square-fill plus-square-fill heart heart-fill reload account account-fill minus-people-fill plus-people-fill integral integral-fill zhihu zhihu-circle-fill gift gift-fill zhifubao zhifubao-circle-fill weixin-fill weixin-circle-fill twitter twitter-circle-fill taobao taobao-circle-fill weibo weibo-circle-fill qq-fill qq-circle-fill moments moments-circel-fill qzone qzone-circle-fill facebook facebook-circle-fill baidu baidu-circle-fill zhuanfa

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文