Icon 图标
APP
PC
我们为每个图标赋予了语义化的命名，命名规则如下:
- 实心和描线图标保持同名，用 -o 来区分，比如 question-circle(实心) 和 question-circle-o(描线)；
- 命名顺序：[icon名]-[形状可选]-[描线与否]-[方向可选]。
引入方式
数字生活小程序工程中，不需要 import，直接使用组件标签即可。
import {Icon} from '@21cnfe/vui'
Vue.component('Icon', Icon)
|
代码演示
基本用法
<Icon type="check"></Icon>
<Icon type="check-circle"></Icon>
<Icon type="check-circle-o"></Icon>
<Icon type="cross"></Icon>
<Icon type="cross-circle"></Icon>
<Icon type="cross-circle-o"></Icon>
<Icon type="left"></Icon>
<Icon type="right"></Icon>
<Icon type="down"></Icon>
<Icon type="up"></Icon>
<Icon type="loading"></Icon>
<Icon type="search"></Icon>
<Icon type="ellipsis"></Icon>
<Icon type="ellipsis-circle"></Icon>
<Icon type="exclamation-circle"></Icon>
<Icon type="info-circle"></Icon>
<Icon type="question-circle"></Icon>
<Icon type="voice"></Icon>
<Icon type="plus"></Icon>
<Icon type="minus"></Icon>
|
图标上色
图标库中图标为svg格式，通过设置color属性修改图标颜色
<Icon type="check" color="red"></Icon>
|
图标尺寸
图标有五种尺寸。通过设置 size 为 xxs , xs , sm , md , lg 分别把按钮设为各个尺寸。若不设置 size，则尺寸为 md
<Icon type="check" size="xxs"></Icon>
<Icon type="check" size="xs"></Icon>
<Icon type="check" size="sm"></Icon>
<Icon type="check" size="md"></Icon>
<Icon type="check" size="lg"></Icon>
|
API
| 属性 |
说明 |
类型 |
默认值 |
type |
内置 icon 名称 |
String |
-- |
size |
图标大小，可选值为 xxs, xs, sm, md, lg |
String |
md |
color |
图标颜色 |
String |
'#000' |
