缺失的代码点

原文发布于crunchingnumbers.live

作为周六的一个项目，我找到了 Material Icons 中缺失的代码点，并向Google 提交了一个 pull request。

问题：

由于最近的一次更新，开发者和设计师们现在可以在项目中使用大约 100 个新增图标。然而，他们现在只能在官方网站上找到图标名称，而无法找到对应的代码点。更糟糕的是，谷歌代码库中的代码点文件尚未更新，因此无法显示这些新图标。

就我个人而言，我需要知道这些值才能在 D3 中渲染图标。如果有一个网站同时显示代码点和图标名称，就能帮我节省时间。看来还有很多人也需要知道这两者。

解决方案：

为了解决这个问题，我创建了一个 Ember 应用，它分三步查找所有图标：（1）将从e000到efff的每个值（共 4096 个可能值）渲染成一个图标；（2）获取元素宽度（如果定义了图标，则宽度为 24px，否则小于 24px）；（3）移除非图标元素。由于需要多次更新 DOM，因此搜索过程相当缓慢。

完成后，我得到了1036个码位。我知道如何将其中932个码位映射到现有码位文件中的图标名称。我需要找到缺失的104个码位的图标名称。

大多数情况下，我都能从网站上找到图标名称。手动搜索速度很慢，让我很希望能够像使用 LaTeX 符号那样，通过绘制图标来搜索。有 15 个图标网站上没有列出，所以我只能猜测图标名称，这很像猜密码。

猜测的过程还挺有趣的。这得益于以下几点：谷歌通常会 (1) 为图标类别使用特定的范围，(2) 将新图标分配到正确范围内的类别和代码点，以及 (3) 遵循命名约定（要直截了当地使用_add、_circle或_outline等词语来描述外观）。

最终，我找到了104个缺失图标中的97个的代码点和图标名称。欢迎访问https://material-icons.herokuapp.com/查看所有图标。

笔记

您可以在这里找到完整的代码：

从 GitHub 下载