Icon 图标

介绍

基于 IconFont 字体的图标集。

基础用法

通过 name 属性来指定需要使用的内置图标。

<vd-icon name="select" />

图标颜色

通过 color 属性来设置图标的颜色。

<vd-icon name="select" :color="'#1989fa'" />

图标大小

通过 size 属性来设置图标的大小，可以指定任意 CSS 单位。

<vd-icon name="select" :size="20" />

TIP

未设置 size 属性时，默认继承父级 font-size 尺寸。

API

Props

参数	说明	类型	默认值
name	图标名称	IconsName	-
size	图标大小	number | string	-
color	图标颜色	string	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent

类型定义

组件导出以下类型定义：

import type { IconsName } from '@vital-design/icons';

主题定制

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
--vd-icon-color	inherit	-
--vd-icon-size	inherit	-