239 - 《Umi 新 Icon 方案的介绍和实现》

这两天花了两个下午（4hx2）实现了 Umi 的新 Icons 方案，目前已随着今晚的发版更新上去了，但是，1）文档还没有加，2）还有大量细节和优化问题。这里展开介绍下他是什么以及是如何实现的。

这个方案是什么？通过以下方式即可在 Umi 中使用 Icon。效果见 PR https://github.com/umijs/umi/pull/10202 ，有 GIF 图。

import { Icon } from 'umi';
<Icon name="fa:home" />

1、fa:home 是啥一次？fa 是 icon 集，home 是 icon 名。icon 集可以在 https://icones.js.org/ 查看和搜索，然后复制 {collection}:{icon} 到代码中即可使用。也就是说这个方案可以使用这里的几万个 icon，包含 antd 的 icons 等。

2、此方案在思路和实现都参考了 https://github.com/antfu/unplugin-icons ，区别是 1）性能更好，unplugin-icons 在多个地方使用相同的 icon 时会重复（我理解的），2）API 调用方式不同，unplugin-icons 需要写子路径，比如 import x from '~/icons/fa/home'，3）Umi 的方案会支持类型提示，4）Umi 方案在运行时也会支持更多功能，比如 antd icon 的 spin、rotate、default component config 等（目前还没有，等下个迭代…），unplugin-icons 只是用 svgr 转完就直出给用户了。

3、除了支持定义好的 icon 集，也会支持本地的 svg、远程的 icon（比如 iconfont.cn 上的）、内部也会计划和设计工程化平台（海兔）做集成（设计师传到平台上的 icon 工程师就可以通过约定的字符串拿来使用，工具会自动做 svg 的拉取和格式化）。

再看此方案是如何实现？代码见 PR。简单说是基于 esbuild + sv