一、将图标放在Frame中
由于所有图标因为其几何特征而具有不同的大小，因此应将它们全部放置在相同大小的框架中。
假设我们有三个图标：22x15px，18x20px和10x5px。它们每个都必须位于24×24像素的帧中。
没有用Frame包裹
将图标放在Frame中
你还需要在Frame中导出图标。
重要！需要导出的是Frame中的图标，而不是图标层。之后，将图标放入24x24px容器中。
而且，按此顺序执行此操作很重要，因为设计人员经常根据视觉中心而不是根据实际中心从框架内部调整图标。
开发人员经常在不注意差异的情况下根据实际中心调整图标。
图标将根据其实际中心进行调整。缩进：左右10px。但是由于图标形状的特殊性，感觉到它向左移动
图标已经过视觉调整。缩进：左12像素，右8像素。故意将图标向右移动，以使其看起来像是居中显示
二、带有图标的Frame中的组件
从带有图标的框架创建组件。
带有图标的Frame中的组件
这将帮助您使用“实例”功能将一个图标快速替换为另一个图标。
为了使实例替换正常工作，图标组件必须位于同一Frame中（稍后再介绍）。
借助“实例”功能替换图标
图标最好用英文标记。如果您下载的图标还具有英文名称，请不要重命名。 这样，您将快速记住图标的名称，并可以轻松地在获取图标的资源上找到它们。 同时，像我一样，如果您在英语方面遇到困难，也会学到新单词。?
三、存储图标
一个项目可以包含不同大小的图标。
例如，对于较小尺寸的项目，标准的24x24px，16x16px或20x20px。
我们将主要的24x24px图标存储在“图标24”画板上。其余图标（其大小大于或小于24px）存储在“其他图标”中。通常没有那么多。
“垃圾桶图标”画板对于在其中存储不同版本的图标是必需的。例如，您选择或绘制了三个聊天图标，选择其中一个，并将其放置在“图标24”画板上，然后将图标的其他两个版本移动到“垃圾箱图标”画板上。如果您决定更改选择，则不必再次寻找它们。
图标画板
四、背景和颜色
为了防止在使用图标选择组件时在“填充”设置中显示不必要的颜色，即使已禁用该组件，也要从组件中删除白色背景。
我还建议立即将颜色样式应用于图标，以便在以后的工作中更方便地更改图标颜色。
去除背景并应用颜色样式
需要使用颜色样式，以便在通过实例进行替换时，不要忘记以所需颜色重新绘制图标。
我建议您选择一种在项目中很少使用的醒目的颜色。将图标保留为黑色或灰色可能会使您忘记为其重新着色。我选择了棕色。
图标的鲜艳颜色清楚地表明，在替换图标后，您需要按所需样式重新为其着色
五、约束条件
使用约束图标调整图层的垂直和水平中心。如果要减少或增加图标组件，这是必需的，但是这样图标本身不会改变其大小。
重要！约束必须由带有图标的图层专门调整，而不是针对整个组件进行调整。
设定约束
六、高效运用利用多选操作
所有上述动作可以一次用几个图标完成。
为了一次选择所有图标组件中带有图标的图层，请选择所有图标组件，然后按Enter。
七、图标框架中的冗余层
除图标外，组件框架中不应有任何其他内容。不要忘记从图标框架中删除所有隐藏的图层。
例如，“材料设计”图标具有白色背景层。
图标具有白色背景层
因此，图标组件应仅包含一层（带有图标的层）。但是可能会有例外，例如，两种颜色的图标。
如果是单色图标，则所有元素都必须合并为一层。
合并图层后，不要忘记将“轮廓线Storke”应用于合并的形状。
将图标合并为一层
所有这些对于减轻图标重量，使SVG代码更小和更易于理解以及对于开发人员在给图标重新着色时不存在问题都是必需的。
当图标组件具有多个图层并且未将其组合为一层时，图标的SVG代码就是这样。该代码非常长，并且针对不同的图标元素具有多达7个“填充”参数。不可能那样做。
图标文件大小1318字节
这就是合并所有图层时SVG图标代码的样子。该代码小得多，只有2个“填充”参数。一个用于容器的背景，另一个用于图标的颜色。你可以那样做。
图标文件大小803字节
导出图标后，您可以使用此网站进一步压缩它。
压缩后，图标代码变得更小，但是图标的外观没有改变。
图标文件大小508字节
八、推荐一些图标库资源
材料设计图标社区
大量图标，包含官方的材料设计图标以及该社区在材料设计指南中创建的图标。我认为，这是目前最好的设置。它满足了我90％的需求。Figma有一个专用的插件。
材料设计图标
官方的材料设计图标。不幸的是，该网站上的图标带有非常奇怪的标签。因此，无法通过搜索找到某些图标。图标文件包含一个带有白色背景的额外层，我认为不需要。在Figma中的插件。
Boxicons
从以前的资源中可以找到图标的替代品。但并非所有图标都是像素完美的。Figma中也有一个插件。
Feathericon
一套不错的质量大纲图标。图标是用笔触制成的，它使您可以缩放和更改图标本身的线条粗细。Figma插件
IBM图标
由公司本身和社区创建的IBM图标。
