深度揭秘可部署矢量字体图标管理平台 YIcon

感谢Qunar技术沙龙（QunarTL）公众号的授权发布。
责编：陈秋歌，寻求报道或者投稿请发邮件至chenqg#csdn.net，或加微信：Rachel_qg。
了解更多前沿技术资讯，获取深度技术文章推荐，请关注CSDN研发频道微博。

2017年3月28日阳光明媚的午后，在 Qunar 维亚大厦阳光房会议室内，去哪儿网首次就在 Iconfont 上的应用和艺龙进行了深入交流，并重点介绍了去哪儿网移动架构团队打造的新型 Iconfont 平台—— YIcon。

会后有幸运采访到参加本次会议的去哪儿网前端高级总监杜瑶，就大家所关注的问题进行更深入的了解。

问：从本次与艺龙的交流中我们了解到在去哪儿有一套关于图标、字体管理的平台，它有效地提高了去哪儿前端在开发中的的工作效率，它叫 YIcon，你能和我们说说它到底是什么吗？另外，它与 Iconfont 有什么关系呢？

杜瑶： YIcon 是一个开源的集图标上传、审核、展示、字体生成、字体图标项目管理于一身的综合性平台。

Iconfont 是大家所熟知的一个概念，通常把自定义字体以及所有使用自定义字体来实现图标的相关技术，都概括性的统称为 Iconfont。就字面意思来看的话，如果将它拆成 Icon 和 Font 两部分，也非常容易理解了，即图标和字体。

YIcon 实质上是一个让 Iconfont 变得更易使用的一个平台，YIcon 所做的一切都是为了给 Iconfont 服务的。

问：我知道阿里有一个公开的 Iconfont 平台，你觉得它与去哪儿网的 YIcon 最大的区别是什么？

杜瑶：从作用和意义上来讲，这两者之间并没有本质区别，都是提供字体图标管理的平台。但从平台设计和定位上，YIcon 有很多不一样的考虑：

YIcon 并没有像阿里的 Iconfont 平台那样，提供一个公开可访问地址供所有人去上传和管理图标。YIcon 更像是 Gitlab 应用程序，允许任何个人或者公司去获取这个程序并进行安装部署，搭建一个私有 Iconfont 平台。

问：这一点我不太明白，直接对外公开，使用者直接访问不是更方便么？

杜瑶：是啊，虽然直接部署在外网让所有人都可以直接操作使用有一定的便捷性，而且可能更容易推广，但是我们并没有这样做其实是经过多方面考虑的。

首先，我们在使用此类平台时，通常会有一个担忧，就是要将自己的图标托管在不受控的第三方平台上，如果有一天平台出现问题时我们也必须承担这样的不确定性带来的风险。

我知道有非常多的公司都对 Iconfont 有需求，但这种不确定性风险肯定也在他们的考虑之内，所以我在想我们能不能为大家提供一种更好的选择。比如像 Gitlab 那样，大家都可以自行搭建自己的 Iconfont 平台，那么这个可能的风险就不存在了。同时这样的平台也能更加符合自己公司的需求，更落地，更重要的是可控！

因此，YIcon 就定位成了可部署的应用。为了方便接入，YIcon 还提供了多种类型的登录接口，这可以让 YIcon 轻松的与各公司的用户系统对接，或进行二次开发。

问：YIcon 平台有哪些特点和优势？

杜瑶：我把最突出的特点概况为几点：

1. 字体编码固定；
2. 字体编码可回收；
3. 不可用编码白名单功能；
4. 搜索功能的多样性，可通过编码/标签/名称等维度搜索图标；
5. 图标上传审核机制；
6. 图标项目版本管理；
7. 用户权限管理。

除此之外，如：开源、可部署、为不同的用户系统提供登录接口、提供二次开发的能力等等，也很有意思。

问：我相信大家一定对您谈到的亮点很感兴趣。您能不能再具体给我们讲讲？让即使还没有用过 YIcon 的伙伴也能先一睹为快。

杜瑶：那我先说说编码固定这个特征吧！YIcon 使用了 Unicode BMP 中的私用区（ Private Use Area ），即码值范围为 0xE000-0xF8FF 的区段，共计 6400 个码位。所谓私用区，指的是保留给大家放自定义字符的区域，可以简写为 PUA。

YIcon 之所以采用编码固定的方式，是基于简单可依赖的策略来制定的。这么做的好处在于：一个图标对应的编码永远都是相同的，不会因为项目的变动或者成员的修改而导致某个图标的编码发生改变，通过这种策略避免图标与编码出现不匹配的情况，而不是通过人；由于 YIcon 是私有的（每个个人或者公司都可以通过 YIcon 安装部署一个私有平台），所以很难出现图标超上限的情况，我很难想象，一个公司或者企业会需要使用超过 6400 个不同的图标（ Qunar 使用这个平台3年多了，图标维持在 1600 个左右）。

虽然 YIcon 有严格的图标审核流程，但仍然无法完全避免图标上传出错或者图标过时的问题。举个例子，设计师上传了一个“酒店”的图标，管理员也审核通过了，过了几天，该设计师觉得这个图标其中的一处线条太细了，修改了一遍，此时他可以直接替换原有的“酒店”图标，而不需要上传一个“相似”的“新酒店”图标，这种编码回收的策略，可以尽可能的减少编码的浪费。

再说说图标项目版本管理吧！在 YIcon 中，图标项目每次变动之后再下载时，就会生成一个新的版本，你可以追溯和查看这个项目产生的所有版本，每一个图标的新增或移除操作都会被清晰记录下来，这也算是一个比较贴心的设计吧！

问：了解的越多越觉得这个平台真的很强大，所以能够大大提升工作效率这个说法一点也不假！不过话说回来，我相信大家更关心的是目前 YIcon 的应用效果怎么样？

杜瑶： YIcon 在去哪儿网的诞生和广泛应用，是又一次解放多端生产力的有效率尝试。

截至目前，去哪儿网不论是 PC，Touch，Native，Hybrid， RN 的项目都已默认使用 Iconfont，而不再使用图片作为图标。甚至设计师也不再需要重复设计或者拷贝了，因为他们可以安装这份字体直接使用。

YIcon 已经开源一段时间了，目前已有不少公司在应用该平台。已实现基本覆盖国内在线旅游行业，如：去哪儿，携程，就旅行，当然还有正计划使用的艺龙等公司。

YIcon 并不止步于旅游行业，目前互联网金融行业的积木盒子，BBAE 等、零售便利店行业的便利蜂等也均已引入该平台，除此之外，还有一些如：在线医疗，在线教育公司也在投入使用。

问：平台能有现在这样的影响力，这更让我好奇是什么原因让你们想做这样一个平台呢？

杜瑶：前端工程师总是在不断的摸索中前行、进步，这当然也包括去哪儿网的前端工程师。

很早之前，我们前端就有童鞋在项目中使用 Iconfont 字体图标来代替图片。那时候，大家通常会选用 Font Awesome、 IcoMoon 或者 Bootstrap 之类的知名库，再后来有了国产良心产品：阿里巴巴矢量图标库。

那时去哪儿网在使用 Iconfont 这件事上还属于非常粗放的阶段，没有硬性的要求也没有使用的标准，比较随意。这让我萌生了在去哪儿网也做一个类似阿里巴巴的矢量图标库的想法。

依稀记得是2014年，恰逢应届生培训（每个应届生正式入职前有3个月的脱产培训，包括技术，开发流程，企业文化等各个方面），每期培训结束前会安排应届生做真实的项目（类似学校的毕业设计）。就是那个时候我的想法成为了应届生项目的课题之一，这就是 YIcon 的起源，其实当时的我并没有想到 YIcon 今天能被如此广泛的应用。

问：你觉得这个平台最神奇的地方是什么？

杜瑶：不能说是神奇吧，但让我觉得惊喜的地方还是有的，主要体现在规模化效应和事业部快速落地这两点上。

前面提到 YIcon 的前身其实是一个比较粗糙的前端应届生项目，并非一个正式立项的产品，整个开发周期大概在2周左右。然而即便是这样，在其刚上线没多久，就有不少事业部业务线纷纷响应，并在极短的时间内，就形成了较大的应用规模。这个情况显然超出了我的预期，因为极少有应届生项目能在这么短的时间内就被如此广泛的应用。

规模化总是会带来更多的需求和反馈。当然，这个项目也不例外，在线上运行了没多久之后，很多不稳定性的因素就暴露出来了，这也包括一些设计上的缺陷。后续在这个基础上修修补补，大概跑了1年多，基本上就到了举步维艰的阶段了。不推倒重来，这就是一个定时炸弹，说不定什么时候就给你一个“惊喜”。

2015年底-2016年初的时候，经过反复思量，我决定从头再来！于是把需求重新 Review 了一遍，不仅结合各业务线的使用反馈还植入了更多新鲜的特性。团队这才开始重新打造，并将这个项目正式命名为 YIcon。

2.5个开发，历时约一个半月，YIcon 终于焕然一新的出现在了大家的面前。界面、交互、各功能都发生了非常大的变化。此时的 YIcon 已经是基于可安装部署的方式在做了，内部运行了一段时间后，我们便在了 Github 上将其开源了。

哪儿网 YIcon 界面截图

问：刚刚我们聊了很多关于 YIcon 的特点和优势，也让我们更加深入地了解了平台的强大功能，不过我相信再完美的平台也会有需要不断优化的地方这一定也是让 YIcon 继续完善的动力。今天有幸能采访您，我也想替广大的新老用户问问，该平台已上线运营了这么长时间，作为 YIcon 项目负责人的您有没有可以提醒使用者注意的地方呢？

杜瑶：其实目前 YIcon 平台已进入成熟阶段，在使用过程中也是越来越稳定，不过有些使用细节还是可以提醒一下的：

1. 不要浪费编码，上传无意义的图标；
2. 建一个通用图标库，避免不同的图标库里有太多雷同的图标；
3. 让业务线的 UI 负责人或者对设计有话语权的人作为图标库的管理员，因为他（她）赋有图标审核的权限。

除此之外，我们后续仍然会广泛的接受大家所提交的 Issues 或 PR。这段时间以来，陆陆续续有不少公司的小伙伴给 YIcon 带来了一些非常有意思的建议和需求，我相信 YIcon 会变得越来越好。

问：今天咱们的采访其实也接近尾声了，相信这篇采访稿推送后，会有更多的人对 YIcon 感兴趣，所以最后再跟我们说说怎么接入吧？

杜瑶：为了方便大家使用和安装部署，我们提供了一个 YIcon 文档：http://yicon.ymfe.tech/ 以供大家查阅。

当然，如果你想阅读源码，可以直接访问 Github: https://github.com/YMFE/yicon。

欢迎加入“CSDN前端开发者”群，与更多专家、技术同行进行热点、难点技术交流。请扫描以下二维码加群主微信，申请入群，务必注明「姓名+公司+职位」。