# Icon

图标组件，用于渲染 SVG 图标，支持自定义颜色、旋转动画和点击交互。

> 查找具体可用的 `SvgXxx`（如 `SvgUserGroup`、`SvgMailGroup`）请见 [_icon-svg.md](_icon-svg.md)，按分组列出 `@befe/brick` 暴露的全部图标，并附已废弃图标的替代映射。

## 适用场景

- 在按钮、表单、列表中展示功能图标
- 需要带旋转动画的 loading 图标
- 需要响应点击事件的可交互图标

## Props

### Icon Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| svg | `FC<{}>` | `-` | 否 | 指定具体的 icon 组件，可从 `@befe/brick-icon` 导入或自定义 |
| spin | `number \| boolean` | `-` | 否 | 是否持续旋转；数值为 css animation-duration（秒），true 相当于 1，值越大转越慢 |
| color | `Color` | `-` | 否 | 颜色，写给 `style.color` |
| onClick | `MouseEventHandler<Element>` | `-` | 否 | 点击回调 |

## 典型用法

### 基础图标

```tsx
import { SvgCalendar, SvgEdit } from '@befe/brick-icon'
import { Icon } from '@befe/brick-comp-icon'

<Icon svg={SvgCalendar} />
<Icon svg={SvgEdit} />
```

### 带颜色

```tsx
import { SvgSignInfo, SvgSignTick, SvgSignExclamation, SvgSignX } from '@befe/brick-icon'

// 通过 className 使用 CSS color 变量
<Icon className={'color-info'} svg={SvgSignInfo} />
<Icon className={'color-success'} svg={SvgSignTick} />

// 通过 prop 直接指定颜色
<Icon svg={SvgSignExclamation} color={'#F27C49'} />
```

### 旋转动画（loading）

```tsx
import { SvgLoading } from '@befe/brick-icon'

// spin=true 相当于 1 秒一圈（最快）
<Icon svg={SvgLoading} spin />

// spin 数值越大越慢
<Icon svg={SvgLoading} spin={2} />  // 2 秒一圈
<Icon svg={SvgLoading} spin={3} />  // 3 秒一圈
```

### 控制大小

```tsx
// 通过 className 设置 font-size 来控制图标大小
<Icon className={'font-size-16'} svg={SvgEdit} />
<Icon className={'font-size-20'} svg={SvgEdit} />
```

## 注意事项

- `Icon` 默认有规范定义的颜色，而非继承父节点文字颜色（`inherit`）。跟随父节点文字颜色属于定制化需求，需通过 `className` 或 `color` 显式指定
- `illustration` 分组下的图标属于多色插画类，不支持通过 `color` 或 CSS `color` 调整颜色
- 图标大小通过 CSS `font-size` 控制，不通过 prop 指定；使用 `className` 来设置对应的 font-size
- 自定义 SVG 图标须符合 `FC<{}>` 签名（无 props 的函数式组件）