# XIcon 自定义图标组件

## 概述

XIcon 是一个统一管理自定义图标的组件，提供了丰富的内置图标，支持自定义样式，并且可以与 XTitle 组件无缝集成。

## 特性

- 🎨 丰富的内置图标库
- 🎯 支持自定义样式
- 🔧 易于扩展新图标
- 📱 响应式设计
- 🎪 与 XTitle 组件完美集成

# XIcon 自定义图标组件

## 概述

XIcon 是一个专门管理自定义图标的组件，**动态加载** `src/assets/svg/his/` 目录下的 SVG 文件，支持自定义样式，并且可以与 XTitle 组件无缝集成。

## 特性

- 🎨 **动态加载 SVG 文件**，无需硬编码图标内容
- 🎯 支持自定义样式
- 🔧 **自动发现新图标**，添加 SVG 文件即可使用
- 📱 响应式设计
- 🎪 与 XTitle 组件完美集成
- ⚡ 纯 SVG 渲染，性能优异
- 💾 SVG 内容缓存，避免重复加载

## 内置图标

组件会自动加载 `src/assets/svg/his/` 目录下的所有 SVG 文件，使用文件名（去掉 `.svg` 扩展名）作为图标名称。

### 当前可用的图标
- `icon001` - HIS 系统图标（来自 `icon001.svg`）

### 添加新图标
只需在 `src/assets/svg/his/` 目录下添加新的 SVG 文件，组件会自动发现并可以使用：

```bash
# 添加新图标文件
src/assets/svg/his/
├── icon001.svg    # 已存在
├── icon002.svg    # 新添加的图标
├── user.svg       # 新添加的图标
└── setting.svg    # 新添加的图标
```

使用方式：
```vue
<XIcon name="icon002" />
<XIcon name="user" />
<XIcon name="setting" />
```

## 基础用法

```vue
<template>
  <!-- 使用动态加载的图标 -->
  <XIcon name="icon001" />

  <!-- 自定义样式 -->
  <XIcon
    name="icon001"
    :style="{ color: '#52c41a', fontSize: '20px' }"
  />

  <!-- 自定义类名 -->
  <XIcon
    name="icon001"
    className="custom-icon"
  />
</template>

<script setup>
import XIcon from '@/base-client/components/his/XIcon/XIcon.vue'
</script>
```

## 在 XTitle 中使用

```vue
<template>
  <!-- 使用 Ant Design 内置图标 -->
  <XTitle icon="user" title="用户管理" />
  <XTitle icon="setting" title="系统设置" />

  <!-- 使用动态加载的自定义图标 -->
  <XTitle customIcon="icon001" title="HIS 系统" />

  <!-- 配置图标颜色 -->
  <XTitle customIcon="icon001" title="HIS 系统" iconColor="red" />

  <!-- 配置图标大小 -->
  <XTitle customIcon="icon001" title="HIS 系统" iconSize="24px" />

  <!-- 组合使用 -->
  <XTitle customIcon="icon001" title="HIS 系统" iconColor="blue" iconSize="20px" dot />

  <!-- 使用自定义 SVG 组件 -->
  <XTitle :iconComponent="CustomIcon" title="自定义图标" />
</template>

<script setup>
import XTitle from '@/base-client/components/his/XTitle/XTitle.vue'
import CustomIcon from './CustomIcon.vue'
</script>
```

## XTitle 属性说明

### 默认样式
XTitle 组件默认包含以下样式：
- 只有右侧有 8px 间距
- 图标垂直居中对齐
- 图标默认样式（16px 字体大小）

### 图标样式属性
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `iconColor` | String | - | 图标颜色，支持 CSS 颜色值 |
| `iconSize` | String | - | 图标大小，支持 CSS 尺寸值 |
| `iconStyle` | Object | - | 自定义样式对象，会合并到图标样式中 |

### 其他样式属性
- `dot` - 显示圆点
- `nodot` - 隐藏圆点
- `center` - 居中对齐
- `littlefont` - 小字体

## Props

| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| name | 图标名称 | String | - |
| style | 自定义样式 | Object | {} |
| className | 自定义类名 | String | '' |

## 扩展新图标

现在添加新图标非常简单，**无需修改代码**：

1. **添加 SVG 文件**：在 `src/assets/svg/his/` 目录下添加新的 SVG 文件
2. **使用图标**：直接使用文件名（去掉 `.svg` 扩展名）作为图标名称

```bash
# 示例：添加新图标
src/assets/svg/his/
├── icon001.svg    # 已存在
├── icon002.svg    # 新添加
├── user.svg       # 新添加
└── setting.svg    # 新添加
```

```vue
<!-- 直接使用，无需任何配置 -->
<XIcon name="icon002" />
<XIcon name="user" />
<XIcon name="setting" />
```

### SVG 文件要求
- 文件格式：`.svg`
- 文件位置：`src/assets/svg/his/` 目录
- 文件内容：标准的 SVG 格式，包含 `<path>` 元素
- 命名：使用有意义的文件名，去掉 `.svg` 扩展名后就是图标名称

## 注意事项

1. **动态加载**：图标会在首次使用时动态加载，后续使用会从缓存中读取
2. **SVG 格式**：确保在不同分辨率下都能清晰显示
3. **颜色继承**：所有图标都使用 `currentColor` 作为填充色，会自动继承父元素的文字颜色
4. **文件命名**：使用有意义的文件名，避免特殊字符和空格
5. **SVG 结构**：确保 SVG 文件包含有效的 `<path>` 元素
6. **缓存机制**：SVG 内容会被缓存，避免重复加载
