Icon 图标

基础用法

<vz-icon name="vz-icon-home"></vz-icon>

图标颜色

<vz-icon name="vz-icon-home" color="teal"></vz-icon>

图标大小

<vz-icon name="vz-icon-home" size="50rpx"></vz-icon>

图片图标

<vz-icon name="/static/logo.png"></vz-icon>

自定义图标

<vz-icon name="iconfont icon-setup"></vz-icon>

iconfont-阿里巴巴矢量图标库

@font-face {
  font-family: "iconfont";
  src: url("...");
}

.iconfont {
  font-family: "iconfont";
}

.icon-setup::before {
  content: "\e617";
}

Props

属性名	说明	类型	默认值
name	图标名称，若带有 / 则是图片路径	string	-
color	图标颜色	string	inherit
size	图标大小	string / number	inherit
i-class	根节点样式类	string	-
i-style	根节点样式	Vue.CSSProperties	-

Events

事件名	说明	参数
click	点击事件	-

CSS

变量名	说明	默认值
--vz-icon-color	props.color	inherit
--vz-icon-size	props.size	inherit
--vz-icon-offset-y	图标垂直偏移量（用于和文字对齐）	0 （图片 0.1em）