在后台里图标是一个很容易被低估的基础能力。

最开始我们可能只是在菜单里写几个 Ant Design 图标：

但因为项目复杂度上来问题会很快出现：菜单图标来自后端配置怎么办？本地 SVG 怎么接入，说起来，Iconify这类海量图标库怎么用？权限菜单里应该把选择器怎么办一个图标？离线场景和在线搜索如何兼顾？

这篇文章结合一个 Vue3 + TypeScript + Ant Design Vue管理后台项目的实现，聊聊如何设计一套工程上更可维护的 Icon 和 IconPicker组件。

文章不会只堆代码，而是主要讲组件边界、数据协议、加载策略和交互设计。

先明确目标

一个通用图标程序至少要解决这几个问题：

1. 统一渲染入口业务侧不关心图标来源，只传一个图标值。老实说，
2. 支持多种来源Ant Design图标、本地SVG、Iconify、本地离线图标包、在线搜索结果。
3. 支持后端配置菜单、权限、页面配置里图标通常是字符串，而不是Vue组件。
4. 按需加载不能为了一个图标选择器，把几万枚图标全部打进首屏。
5. 选择器可用支持搜索、分类、分页、预览、选中态和手动输入。
6. 接口简单稳定:业务组件最好只面对 icon:string 这一种模型。

第一步先 :用字符串协议统一图标来源

文档程序的关键不是先写组件,而是先统一文档值的表达方式。

可以约定如下协议 :

 type IconValue =| `antdv-next:${string}`| `antd:${string}`| `svg:${string}`| `ri:${string}`| `mdi:${string}`| `ion:${string}` | string;

例如 :

 const icons =;

这样做有几个好处 :

1. 字符串可以直接存数据库,适合菜单 、权限 、页面配置。
2. 前缀就是文档来源,不需要额外维护复杂对象。
3. Icon可以根据前缀自动判断渲染方式。
4. IconPicker选出来的值可以原样交给 Icon