Icon 图标

用于展示 icon，组件名：uni-icon，代码块： uIcon。

使用方式：

在 script 中引用组件 

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

在 template 中使用组件

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

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

Icon 属性说明：

属性名类型默认值说明
typeString-图标图案，参考下表
colorString-图标颜色
sizeNumber24图标大小
@clickEventHandle-点击 Icon 触发事件

type 类型：

<link rel="stylesheet" type="text/css" href="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/icon1.1.css"/&gt;

  • 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: