Element Plus 组件库相关技术：7. 组件实现的基本流程及 Icon 组件的实现

前言

本章节我们将要实现 Icon 组件，Icon 组件应该是所有组件里面最简单的一个组件了，所以我们由简入深，循序渐进进行学习。Icon 组件虽然简单，但它却包含了一个组件的全部基础流程，通过实现 Icon 组件进行理解 Element Plus 组件实现的基本原理。

我们其实在上篇《6. CSS 架构模式之 BEM 在组件库中的实践》已经实现了最简易的一个 Icon 组件，本章节将继续完善它。

组件目录结构

首先我们按以下目录结构完善我们的 Icon 组件目录，其他组件的基本目录结构跟此类似。

├── packages
│   ├── components
│   │   ├── icon
│   │   │   ├── __tests__       # 测试目录
│   │   │   ├── src             # 组件入口目录
│   │   │   │   ├── icon.ts     # 组件属性与 TS 类型
│   │   │   │   └── icon.vue    # 组件模板内容
│   │   │   ├── style           # 组件样式目录
│   │   │   └── index.ts        # 组件入口文件
│   │   └── package.json
复制代码

通过上面的 Icon 组件目录结构，我们看出 Vue3 Composition API 的优势，可以根据逻辑功能来组织代码，从而实现高内聚，低耦合。上述 Icon 组件具体操作就是把组件属性与 TS 类型抽离放在了独立的一个文件中，这样就使得我们的程序代码在可维护性和灵活性方面可以做得非常好，从而让我