Skip to content

图标清理

Iconify 项目的目标之一是让图标易于使用。

这并不像将图标通过流行的优化工具处理那样简单。 Iconify 中的图标解析非常严格,且处理过程更具侵入性。

图标会被修改,以便无论属于哪个图标集,都能以相同的方式使用。

具体做了哪些处理?

每个图标都会:

  • 验证(见下文)。
  • 清理和优化(见下文)。
  • 调色板会被修正为仅包含 currentColor 或硬编码调色板。
  • 如有需要,图标会重命名以遵循 Iconify 命名规范(见下文)。

命名规范

为了让图标无论来源如何都易于使用,所有图标都遵循相同的命名规范。

图标名称中允许的字符为 "a-z"、数字和 "-"。连字符不能用于名称的开头或结尾,也不允许连续使用两个连字符 "--"。

有效图标名称示例:"home-outline"、"1st-place-medal"、"camera-with-flash"。

验证

在导入和验证图标时,包含以下任何内容的图标将不被允许:

  • 脚本和事件监听器。它们可能具有危害性或代码编写糟糕,因此不应出现在公共图标中。
  • 位图图像。它们无法无损缩放,因此不应出现在矢量图标中。
  • 外部资源。图标不应依赖于托管在其他地方的内容。
  • 文本。文本在不同浏览器和操作系统中的渲染方式不同。图标应对所有访问者显示一致。请将文本转换为形状。

此外,所有不影响图标渲染的内容都会被移除。许多劣质编辑器会在生成的 SVG 中留下大量垃圾代码,这些都会被清除。

对于开源图标集,此操作在使用 Iconify Tools 的导入过程中完成。自定义图标集可能不遵循相同的准则。

清理与优化

清理与优化过程会移除所有不必要的代码,在不破坏图标的前提下,使图标体积尽可能小。

有关图标清理的更多详细信息,请参阅图标清理流程

调色板

调色板始终会被检查,并在必要时进行修正。

具体执行的操作取决于图标的类型。

图标分为两种类型:

  • 具有硬编码调色板的图标,例如表情符号。颜色无法更改。
  • 单色图标。它们只有一种可以更改的颜色。

它们有什么区别?

硬编码调色板

具有硬编码调色板的图标中的颜色无法更改。

示例:

在 CSS 中,这些图标用作背景图像。

此类图标中的调色板将保持原样。

单色图标

所有单色图标都会被修改为使用 currentColor 作为颜色。

这使得在 CSS 中通过更改文本颜色来轻松更改图标颜色成为可能。

示例:

将鼠标悬停在上方示例上以查看颜色变化。

为什么不使用 fill?主要原因是许多图标使用 stroke 来定义颜色。使用 fill 设置颜色是一种不良实践,因为它会将你的图标限制为仅使用 fill 的图标。它还会阻止图标用作遮罩图像,因为背景颜色无法设置为填充颜色。

在 CSS 中,这些图标用作遮罩图像,有关详细信息,请参阅在 CSS 中使用 SVG

请勿设置 fill!

某些图标集建议通过更改 fill 来改变颜色,但在使用 Iconify 时绝对不要这样做!

这是一种非常糟糕的做法,因为并非所有图标都使用填充。许多图标使用 stroke,但你不能更改 stroke,因为这会给没有 stroke 的图标添加描边。

为了避免所有这些混乱,Iconify 将单色图标中的颜色更改为 currentColor,因此无论图标结构如何,你都可以通过更改文本颜色来更改图标颜色。

混合 currentColor 和自定义颜色

虽然可以混合单色和硬编码调色板,但这是一个非常糟糕的主意。混合了 currentColor 和硬编码颜色的图标将无法使用,原因如下:

  • 它无法在 CSS 中使用。如果用作背景图像,currentColor 会变成黑色。如果用作遮罩图像,自定义调色板会消失。
  • 它仅适用于特定的配色方案,通常仅针对白色背景设计。

因此,Iconify 开源图标集仓库中不允许使用混合调色板的图标。

格式

图标会被转换为 IconifyIcon 格式进行存储,然后以 IconifyJSON 格式存储在图标集中。

数据存储在易于使用的 JSON 文件中。

自定义类型

为什么图标以自定义的 IconifyIcon 类型存储,而不是 SVG?

该格式将 <svg> 元素的属性与内容分开。 这使得无需解析 XML 即可轻松修改 SVG:调整大小、更改 viewBox、无需解析 JSX 即可渲染为组件、在图标中追加/前置形状等。

图标集

多个图标存储在一个图标集中。有关详细信息,请参阅图标集文档