Icon 图标

iDesign 提供了一套常用的图标集合，可直接使用。

基本用法

使用 name 属性选择展示的图标。

<template>
  <div className="idesign-demo-block-row">
    <i-icon name="ModeLight" />
    <i-icon name="ModeDark" />
  </div>
</template>

显示代码复制代码复制代码

不同尺寸

提供 size 属性自定义图标大小。

<template>
  <div className="idesign-demo-block-row">
    <i-icon name="TipCheck" :size="16" />
    <i-icon name="TipCheck" :size="24" />
    <i-icon name="TipCheck" :size="32" />
  </div>
</template>

显示代码复制代码复制代码

不同颜色

提供 color 属性自定义图标大小。

<template>
  <div className="idesign-demo-block-row">
    <i-icon name="TipClose" :size="24" color="#5e62ea" />
    <i-icon name="TipClose" :size="24" color="#65b687" />
    <i-icon name="TipClose" :size="24" color="#f1ac51" />
    <i-icon name="TipClose" :size="24" color="#ec7491" />
  </div>
</template>

显示代码复制代码复制代码

全部图标

Icon Attributes

属性	说明	类型	默认值
name	图标名称	string	--
size	图标尺寸	string〡number	16
color	图标颜色	string	--
disabled	是否禁用图标	boolean	false

Icon Events

属性	说明	类型	默认值
click	点击图标触发事件	(ev: MouseEvent) => true	--