# VIcon 图标组件

> 支持 Element Plus 官方图标库的图标渲染，适用于表单、菜单等场景。与 SvgIcon 区分，VIcon 仅用于 Element Plus 图标。

---

# VIcon

## 介绍 | Introduction

`VIcon` 组件用于渲染 [Element Plus 图标库](https://element-plus.org/zh-CN/component/icon.html) 中的图标。通过传递图标名称即可显示对应图标，支持自定义大小和颜色。

The `VIcon` component renders icons from the [Element Plus icon library](https://element-plus.org/en-US/component/icon.html). Pass the icon name to display the corresponding icon, with support for custom size and color.

---

## 属性 | Props

| 属性名 | 说明 | 类型 | 默认值 | 必填 |
| ------ | ---- | ---- | ------ | ---- |
| name   | 图标名称（Element Plus 图标名，如 Edit、Location 等）<br/>Icon name (Element Plus icon name, e.g. Edit, Location) | string | - | 是 Yes |
| size   | 图标大小，支持数字（px）或字符串（如 1em, 24px）<br/>Icon size, number (px) or string (e.g. 1em, 24px) | string \| number | - | 否 No |
| color  | 图标颜色<br/>Icon color | string | var(--el-text-color-primary) | 否 No |

---

## 用法示例 | Usage Example

### 基本用法 | Basic Usage

```vue
<template>
  <VIcon name="Edit" />
  <VIcon name="Location" size="32px" color="#409EFF" />
</template>
```

### 在表单输入中使用 | Use in Form Input

```vue
<template>
  <VInput v-model="value" :field="field">
    <template #inputPrefix><VIcon name="Edit" /></template>
    <template #inputSuffix><VIcon name="Location" color="red" /></template>
  </VInput>
</template>
```

---

## 说明 | Notes

- `name` 必须为 [@element-plus/icons-vue](https://github.com/element-plus/element-plus-icons) 中已注册的图标名，区分大小写。
- 支持所有 Element Plus 官方图标，具体名称可参考 [官方文档](https://element-plus.org/zh-CN/component/icon.html#icon-collection)。
- `size` 支持数字（自动加 px）或字符串（如 1em、24px）。
- `color` 支持任意合法 CSS 颜色值。
- VIcon 只适用于 Element Plus 图标，如需自定义 SVG 图标，请使用 `SvgIcon` 组件。

---

## 与 SvgIcon 区别 | Difference from SvgIcon

- `VIcon`：用于 Element Plus 官方图标，`name` 为官方图标名。
- `SvgIcon`：用于自定义 SVG 图标，`name` 为本地 SVG 文件名。

---

## 完整示例 | Full Example

```vue
<template>
  <div style="display: flex; gap: 24px; align-items: center;">
    <VIcon name="Edit" size="32" color="#409EFF" />
    <VIcon name="Location" size="28" color="green" />
    <VIcon name="User" size="24" color="orange" />
    <span>Element Plus 图标</span>
  </div>
</template>
```

---

## 组件注册 | Component Registration

```js
import { createApp } from 'vue'
import App from './App.vue'
import VIcon from '路径/到/VIcon'

const app = createApp(App)
app.use(VIcon)
```

---

## 相关链接 | Related Links

- [Element Plus 图标库](https://element-plus.org/zh-CN/component/icon.html)
- [@element-plus/icons-vue](https://github.com/element-plus/element-plus-icons)