Icon 图标

用于展示 icon,组件名:uni-icon,代码块: uIcon。

使用方式:

script 中引用组件

import uniIcon from "@/components/uni-icon/uni-icon.vue"
export default {
    components: {uniIcon}
}

template 中使用组件

<uni-icon type="contact" size="30"></uni-icon>

实际效果参考:https://github.com/dcloudio/uni-ui

Icon 属性说明:

属性名 类型 默认值 说明
type String - 图标图案,参考下表
color String - 图标颜色
size Number 24 图标大小
@click EventHandle - 点击 Icon 触发事件

type 类型:

<link rel="stylesheet" type="text/css" href="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/icon1.1.css"/>
  • contact
  • person
  • personadd
  • contact-filled
  • person-filled
  • personadd-filled
  • phone
  • email
  • chatbubble
  • chatboxes
  • phone-filled
  • email-filled
  • chatbubble-filled
  • chatboxes-filled
  • weibo
  • weixin
  • pengyouquan
  • chat
  • qq
  • videocam
  • camera
  • mic
  • location
  • mic-filled
  • location-filled
  • micoff
  • image
  • map
  • compose
  • trash
  • upload
  • download
  • close
  • redo
  • undo
  • refresh
  • star
  • plus
  • minus
  • circle
  • clear
  • refresh-filled
  • star-filled
  • plus-filled
  • minus-filled
  • circle-filled
  • checkbox-filled
  • closeempty
  • refreshempty
  • reload
  • starhalf
  • spinner
  • spinner-cycle
  • search
  • plusempty
  • forward
  • back
  • checkmarkempty
  • home
  • navigate
  • gear
  • paperplane
  • info
  • help
  • locked
  • more
  • flag
  • home-filled
  • gear-filled
  • info-filled
  • help-filled
  • more-filled
  • settings
  • list
  • bars
  • loop
  • paperclip
  • eye
  • arrowup
  • arrowdown
  • arrowleft
  • arrowright
  • arrowthinup
  • arrowthindown
  • arrowthinleft
  • arrowthinright
  • pulldown
  • scan

Tips:

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

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

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

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