Icon 图标 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用

我们为每个图标赋予了语义化的命名，命名规则如下:

实心和描线图标保持同名，用 -o 来区分，比如 question-circle(实心) 和 question-circle-o(描线)；
命名顺序：[icon名]-[形状可选]-[描线与否]-[方向可选]。

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import {Icon} from '@21cnfe/vui'
Vue.component('Icon', Icon)

代码演示

Icon 图标 icons

基本用法

<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'`

1. Icon 图标 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

Icon 图标 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

引入方式

代码演示

API

Icon 图标 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用