RemixIcon 是一套简洁开放的矢量图标库，该图标库在 GitHub 上获得了 3K个Star，身边不少同事朋友对它赞赏有加，本期「有云:」邀请到了RemixIcon的作者 - 萧醇，聊聊作者本人对图标库的看法。
小编：先和大家简单介绍一下 RemixIcon 吧
萧醇： RemixIcon 是之前业余时间维护的 Side Project，是一套面向设计师和开发者的矢量图标库。
目前由个人独立绘制完成，包含 2200 多枚图标，其简洁中性的设计风格可适用于大多数行业和用户群体的互联网产品，当然也可以插入 PPT 或海报等来作为点缀元素。
Remix 一词源自音乐中「重新编曲 / 混音」的概念。我们都知道，常用的图标在其图形描述上其实已经形成了一些业界通用的标准，比如我们习惯使用 3.5 英寸软盘的形象来表示「保存 / Save」、使用小房子来表示「主页 / Home」，就像我们的文字一样都是通用的笔画构成；Remix 则指在借鉴通用表述模式的基础上，以统一的风格进行重塑，类似于文字中字体风格的概念，RemixIcon 就像一套黑体字。
小编：在 RemixIcon 发布前，市面上其实已经有不少成熟的图标库产品了，萧醇当时为什么会去尝试「造轮子」创造一套新的图标库呢?
萧醇： 这个问题说来话长，不过我尽量长话短说。之前在咨询公司做 2B 项目较多，基于版权原因，不太敢去使用来源不明的图标，而给客户做设计提案的时候发现，客户都比较倾向于使用类似现在 RemixIcon 的中性风格图标。而市面上也很难找到合适的图标来满足特定的需求场景，所以大部分图标都是针对客户的需求场景定制重绘的。
久而久之便攒出了一个小图标库，不少新项目的图标也都是在复用和微调，分享给其他设计同事之后，在大家的吹捧下飘飘然脑子一热便向大家立了一个 Flag，就是搞一套成熟免费的图标库出来！
但是，和多数朋友一样，我也常年挣扎在拖延症晚期的边缘；脑中经常闪现各种各样的想法，有时候是想写一篇文章，有时候是想做一个小工具/插件来解决工作过程中的一些痛点，但鉴于拖延症的原因，有些想法做到一半就夭折了，还有很多想法都永远只停留在了笔记中，等到偶尔翻起这些笔记，却发现已经失去了当时的激情和时效性。所以我的座右铭是「有趣的想法一定要实现」。也正是这句座右铭，激励着我一定要把 RemixIcon 做出来；况且 Flag 都立了，拉出去的屎是坐不回去的，搞不出来的话我自己都瞧不起自己，更别指望大姑娘能瞧上我了！
我想应该有不少同学和我一样，或多或少都有一些「造轮子」情结，一但有什么东西用得不爽，就想再搞一个出来干掉它。于是 RemixIcon 就诞生了......
小编：相比于谷歌的 Material Icons 或者阿里的 Iconfont，那 RemixIcon 有哪些特点呢?
萧醇： 其实最一开始是把 Material Icons 作为对标对象的，当时 Material Icons 只有一套图标，其中部分图标为面型风格，部分图标为线性风格，杂糅在一起，没什么章法；而我想做的图标库两种风格一一对应，这样在一些 UI 场景中可以用于状态切换，算是核心卖点。但当我绘制到一半的时候，谷歌更新了 Material Icons，不光区分了面型和线性，甚至还增加了锐角、圆角、双色模式。当时对我打击有点大，再一次萌生了放弃的念头，不过好在还是坚持下来了......
RemixIcon 借鉴了 Material Icons 的尺寸标准，也是 24dp，但在此基础上，重新调整了它基准图形的网格关系，使得图标看起来更加「矮胖」一点，也更方正饱满。圆角基准也从 2dp 改为了 1dp，同时统一了图形复杂度，所以相比于 Material Icons，RemixIcon 看起来风格会更统一、简约且精致硬朗一些。
而阿里的 Iconfont 其优势是图标量极大，RemixIcon 在绘制的时候也时常去 Iconfont 找图形参考。但 Iconfont 是一个 UGC 的平台，内容由用户创造，对于内容的原创性、著作权等还没有办法做到很严格的审核，所以随意下载使用，其实存在一定的版权风险；另外 Iconfont 的图标品类很多，所以检索的结果里，很难找到一套风格一致的图形满足用户的需求场景。相比之下，RemixIcon 采用 PGC 的内容模式，尺寸、风格统一，用起来会比较方便。
RemixIcon 还提供了 PPT 和 Keynote 的版本、 font-icon 的字体图标、symbol svg sprite、免费的 CDN 服务和 npm 等开发同学比较熟悉的使用方式等...... 我们的目标用户从一开始就不光是定位于设计师，还包括前端工程师、自由开发者等。
小编：这套图标萧醇画了多久？
萧醇： 蛮久的，图标库差不多是从 2017 年末开始整理和绘制的，直到 2018 年末才上线，上线的时候是 1200 多枚，后来持续更新到了 2200 多枚。画图标其实和做字差不多，挺枯燥的，慢点的一个图标要画 1 小时，快点的不到 1 分钟就搞定了，大部分时间都是在微调打磨，不用动脑，所以我经常下班后一边看电视一边画 [偷笑]。
小编：超过 1200 枚图标后才上线第一个版本，这似乎并不是一个精益的产品模式......
萧醇： 确实很不 Agile(敏捷)，除了因为工作忙没时间等原因外，主要是因为官网一直没能投入开发。
使用百度网盘之类的服务提供文件下载渠道的方式很不利于传播，而且传播过程中会丢失来源信息，肉眼搜索很不方便，效率低下，使用方式的限制也比较多。我自己电脑上也曾经下载了大量的素材库，但最终都尘封在了硬盘中的某个角落，这种情况应该不止我一人。所以我希望可以通过工具化的方式，赋予图标库更大的使用价值，而非单纯占用大家的硬盘资源，所以我们专门开发了一个网站（Web 应用）来实现工具化。
Web 应用的设计其实也花了不少精力，设计过程中一直在做减法，按照极简的理念去打造产品。极简主义不在于你拿走了什么，而是在于你留下了什么。如果抽象为设计哲学的话，其关键词是「退让」：首先网站只是一个工具载体，图标才是核心内容本身，花里胡哨的 UI 和动效会喧宾夺主；其次我们服务的对象是设计从业者或与设计打交道的人，「无设计感」能让用户尽情去发挥其自身的创作灵感，而不会受到我们的信息干扰；另外就是提高使用者的效率，让用户快速获取到信息且用完即走，否则太长时间的停留会打断用户的设计思路。而这背后，需要一系列的「退让」和技术支撑，比如我们支持在网站中复制图标后在设计工具中直接粘贴、支持毫秒级的实时模糊匹配中英文搜索、使用 font-icon 进行展示初始化来减少请求次数提升网页加载效率...... 当然，简洁不意味着简陋，所以使用了一些简洁轻柔的色彩和动效搭配，让产品内敛有质感，带给用户舒适的体验和愉悦的感受。
对于萧醇说的「退让」，小编似乎有些体会，比如拿起手机看时间，发现有一条微信消息，于是跑到微信里回消息，然后顺便刷了下朋友圈，等到放下手机时，猛然问自己：时间是几点来着？
小编：网站是春哥一个人设计和开发的吗？
萧醇： 不是不是，网站是和 Wendy Gao 一起协作构建的，Wendy 是一个合作过多次的程序媛小姐姐，这丫头对技术有着狂热的追求，经常从技术层面给我很多设计上的启发。当时我对她展开了老罗式（自以为）的演讲尝试说服她一起搞这个项目，说这会是一个享誉全球的开源项目，GitHub 上 1万 Star 不是问题，盈利模式推广渠道等都交给我，万事俱备只缺技术，感觉自己说的很生动有感染力，自己都快感动哭了。结果这丫头压根不在意这些，反而教育起了我：咱们都享用了多少开源产品带来的便利了，我们也得为开源社区做点贡献嘛，学学你的偶像 Lea Verou，过程中还能钻研很多边界知识和技术，顺利的话你还能收获一波女粉丝，钱不钱的不重要，你那网站设计得咋样了？啥时候可以开始？
我们一拍即合，业余时间差不多都投入到了这个项目，后面也有别的小伙伴参与到项目协作。当然，前面画的大饼一个也没实现，但时不时也会请她吃饭送个生日礼物什么的，不然没脸。
小编：RemixIcon 官网的架构是怎样的？是怎么管理和维护内容的呢？
萧醇： 网站产品采用的是纯前端的开发模式，算是个 SPA(Single Page Web Application) 产品，单页网站极大地减少了新页面的加载速度，也降低了跳出率，减少误关闭浏览器标签的情况。虽然是单页网站，但为了特定内容的便捷传播，也增加了一些锚点信息来实现一个链接直接访问到指定的弹窗页面，比如通过链接 https://remixicon.com/#download 可直接访问到下图界面。
我们使用 Vue.js 作为静态生成器，通过本地构建的方式将图标进行打包，配合第三方开源插件生成字体包，利用 json 管理和维护搜索关键词和展示内容，构建成标准的 Html CSS JavaScript 静态文件；最后上传到「腾讯云」的静态存储托管我们的静态网站，以「DNSPod」做域名解析。腾讯云的静态托管还是蛮优秀的，提供了 CDN 进行全球加速访问，除了少数国家出现节点访问失败的情况，大部分的访问速度都很不错，只是发布上比较麻烦，属于纯手工上传，目前还不支持动态获取 GitHub 仓库内容，自动 build 和发布的能力。
Wendy 主要负责功能的开发以及非功能性需求的处理；我主要负责网站产品的的设计和功能性需求的输出，再就是处理一些杂活，比如 GitHub 上 Readme、Release 的编写、反馈的收集和管理、一小部分 CSS 调整优化以及后续的更新和发布、体验测试等工作。
除去设计本身，完成一次发布需要很长的流程，这其中包括但不限于图形转曲、图标 SVG 代码精简、图标命名、json 文件配置、中英文搜索关键词编写、生成字体包、网站构建编译、上线发布、更新 GitHub 仓库、同步 npm 等等，一步出错，就会导致编译失败。过程中也发现了很多坑，比如 Sketch58 之后的版本在图形转曲时会生成无用的矢量节点，需要用 57 版本转曲才能让强迫症好受一些。
我们大部分时间都是远程协作，也在践行一些敏捷开发的实践。通过 Trello 看板进行项目管理和需求沉淀；环境上也严格按照开发环境、测试环境、生产环境的模式进行开发维护。
小编觉得，他们虽然只有 2 人，但确实搞得还像模像样的，很有意思。
小编：RemixIcon 的用户量现在怎么样，方便透露吗？
萧醇： 没什么不方便的，之前 Wendy 在我们网站挂了百度统计，目前来说，平均日 UV 在 1450 左右，PV 日均在 4000 左右，跳出率是 20%，平均访问时长 12 分钟。每个月的访客中，约 65.6% 来自老用户，34.4%来自新用户；早期会有不同的来源站点引流到我们的网站，但现在基本上 100% 都来自直接访问了。
国内用户以北上广为主，广东最多，占 20.4%；其次是北京，占比 14.1%；然后是上海，占比10.1%。全球来说，中国用户占比 25.7%，其余都是海外用户，比如印度、美国、俄罗斯、韩国、印尼、乌克兰、巴西等等，覆盖 157 个国家。
针对开发工程师的 CDN 服务每月有 32M 的 hits 量，虽然图标库已经发布到 2.5 版本，但 2.3 版本的使用量最大。npm 平均每周大约在 3000 次调用；网站流量大概每个月 200G 流量，腾讯云 18 元 100G 的流量包我每个月买两次
