在现代 Web 应用中，图标无处不在：按钮上的勾选图标、导航栏的菜单图标、提示信息的警告图标等等。

Ru果每次使用图标dou要手写 SVG 代码或者引入图片，会带来以下问题：

咱就是说这样太麻烦了！

因此，我们需要一个统一的 Icon 组件来解决这些问题。

核心功Neng实现

让我们逐步拆解这个组件的实现，kankan每一部分是如何工作的。

从 Ant Design Icons 导入需要的图标：

import { 
  CheckOutlined, 
  CloseOutlined, 
  InfoCircleOutlined, 
  SearchOutlined, 
  // ... geng多图标
} from '@ant-design/icons-vue'

创建一个映射表，将简单的名称映射到实际的图标组件：

const iconMap: Record = {
  'check': CheckOutlined,
  'close': CloseOutlined,
  'info': InfoCircleOutlined,
  'search': SearchOutlined,
  // ... geng多映射
}

这个映射表是整个组件的核心！它的作用是：

简化使用：只需要传入简单的名称，就Neng渲染对应的图标组件

统一管理：所有可用的图标dou集中在这个对象中，方便维护和

如何支持图标点击事件？

组件本身不需要处理，父组件直接绑定即可：

Vue 会自动将事件绑定到组件的根元素上。

. 高度可定制

<MyIcon name="home" :size="" color="#409eff" />

. 性强

<MyIcon :size="">  
  <svg><!-- 自定义 SVG --></svg>
</MyIcon>

技术要点 . TypeScript 类型定义

// PropType 用于定义 props 的类型
type: String as PropType
// CSSProperties 用于定义 CSS 样式对象的类型
const style: CSSProperties = {}
// Record 用于定义对象映射的类型
const iconMap: Record = {}

. Vue Composition API

// computed：计算属性，自动缓存和响应式geng新
const iconStyle = computed => { /* ... */ })
// defineProps：定义组件属性
const props = defineProps
// defineOptions：定义组件选项
defineOptions

. 动态组件渲染

<component :is="iconComponent" />

Zui佳实践 . 统一图标大小

在实际项目中，建议定义统一的图标大小规范：

// constants.ts
export const ICON_SIZE = {
  SMALL: ,
  MEDIUM: ,
  LARGE: ,
}