Skip to content

Figma 创建图标 icon 组件时的几个原则

一个图标组件的制作最好符合以下几个原则,才能在使用的过程中适配继承父组件的尺寸、颜色等,提升组件库的使用效率:

  1. 最终的组件内部应该只有一个图层。因为只有一个图层的时候,被调用的时候能够继承一些调用容器的一些属性,比如大小颜色等,该原则要配合下面两条。
  2. 最终使用合并图层的方式,应使用布尔运算的合并,而不是 ctrl+e 压扁,这样在已经定义好颜色的其它组件更换 icon 时,颜色能够正确继承。
  3. 最终组件内部的单图层,应该横向与竖向都使用 scale 属性,这样能够被调用时自动匹配父级容器的大小。

如下图,黑色的是没有使用 布尔运算合并 的图标,而正确合并图层后的紫色图标是可以正确继承颜色的。

iShot_2023-09-27_17.42.38.gif