RemixIcon 和它背后的故事
导语：
RemixIcon 是一套简洁开放的矢量图标库，该项目在 GitHub 上也获得了 3K 个 Star，身边不少同事朋友对它赞誉有加，本期「有云:」邀请到了 RemixIcon 的作者——章萧醇，聊聊作者本人对图标库的看法
此处省略大概 150 来字，大意是小编与萧醇互相问好、小编对 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 的流量包我每个月买两次😂......
从数据表现大概能推测出：用户的回头率和忠诚度还可以，老用户居多；虽然用户用完即走，但会习惯于将我们的网站挂载在标签页，直到关闭或者被浏览器释放内存；由于后续几乎没有做过宣传，所以外链引流逐步归零，但应该有不少用户添加了收藏；用户分布的情况和互联网的地域发展、人口数量契合度很高；开发者用户对于图标的丰富程度依赖不是非常强烈，所以会有不少产品依旧停留在旧的图标库版本。
小编：
听起来很厉害啊，用户量很大了。那你觉得 RemixIcon 还有哪些需要提升的呢？
章萧醇：
其实问题非常多，由于精力和时间原因，还一直没来得及去处理。比如：
「推广宣传不到位」，刚开始的时候通过投稿在阮一峰公众号宣传过一波，效果很不错，GitHub 在那天直接上涨 500 Star（不愧是布道大师），但热度存留时间非常短，只有 3 天左右；后来也尝试在掘金、V2EX 发帖做过宣传，但收效甚微，也想在设计社区写写文章宣传，但拖延症导致一直没写...... 发展到现在主要是靠缘分；我俩脸皮也都比较薄，性格使然，硬广不是我们的风格，而在推广和裂变方面又都不是很擅长。
「商业化模式不清晰」，虽然商业化和开源并不冲突，但在商业化上一直没有很好的思路，目前基本上都是用爱发电。但是用爱发电毕竟不是一个可持续发展的方式，况且项目不是我一个人在做，也要对小伙伴负责。好在我们有工作收入，对于商业化还不急，但也需要边发展边琢磨。
「生态建设未开展」，得益于开源社区的力量，我们有了一些粉丝用户，但现存的粉丝群体并未被聚集起来；在协作共建方面，其实一直没能建立起项目的生态圈，第三方贡献者也没有归属感和荣誉感，还有一些设计师想加入协作，但因为缺少规范文档而一直被拒之门外。况且以我一人之力补充完善图标的能力是非常有限的，很需要其他伙伴的加入，尤其是最近因为工作忙导致断更半载，问题的暴露就更加明显了。
「发布流程太复杂」，刚刚有提到过，发布一次流程很长，这导致版本发布成本很高，导致需要攒很多改进或者新图标才发布一次，虽然 Wendy 已经搞了一些自动化的脚本，但依旧有不少内容是可以被自动化取代从而减少人工犯错导致编译失败的。再比如目前搜索关键词是靠穷举的方式在 json 中维护的，缺少关键词关联模型，也不便于使用者协作补充。
问题很多很多，就不一一列举了，这些都是需要在后续版本中发力的地方，任重道远。
小编：
萧醇你觉得在维护 RemixIcon 这个项目的过程中有哪些收获呢？
章萧醇：
收获太多了哈哈：
最直观的是个人能力技术栈的拓展吧，比如在这个过程中学习了一些 node.js 的 npm 指令；学会并深爱上了 Markdown 的文本编辑模式；对 SVG 这种格式做了一些研究......
当然还收获了很多用户、认可和成就感。有一些设计小伙伴把我们的图标库针对 Figma、Axure 等做成了插件；还有开发小伙伴在我们的基础上搞出了 Vue 版和 React 版等；Dribbble 上也见到不少首页推荐的 UI 作品中使用了 RemixIcon......
还收到了一些关心和问候，比如全球疫情期间，有海外用户发邮件关心我们在疫情中是不是还好「Dear Jimmy and Wendy, I hope you both are doing well amid the Covid-19 Pandemic...」（也可能是在催更哈哈哈），还有海外用户发邮件说「I am a huge fan of your remix icon design library and we need you back」，悲喜交加，任重道远。
当然，还认识了不少设计大牛和优秀的独立开发者。
小编：
萧醇最后还有什么想对大家说的吗？
章萧醇：
哈哈，终于结束了吗？咱俩聊了有 5000 来字了吧？估计读者要疯。
你是怎么算出来的？？？？？
我想说：我这个人吧，想法多但脑容量小，在拖延中焦虑，在焦虑中逃避，在逃避中放弃，在放弃后自我怀疑...... 如果你也有类似的感受，那一定要先动起来，逼自己一把，起步之后，一切就水到渠成了！解决问题的过程中会有很多成长，结果往往会有意想不到的收获。
还是那句话：有趣的想法，一定要实现！