Appearance

在 Tailwind CSS 的 Iconify 中自定义图标 ​

本文档介绍了 addIconSelectors 插件的 customise 选项。

自定义回调 ​

customise 选项允许您更改图标的内容。

它的用途是什么？

  • 您可以更改使用描边的图标中的 stroke-width。
  • 您可以更改使用硬编码调色板的图标（例如表情符号）中的颜色。
  • 您可以更改动态图标中的动画持续时间。
  • 您可以更改半透明元素的不透明度。
  • 您可以向图标添加额外的形状。

……以此类推。您可以完全控制 SVG 内容。

用法 ​

customise 选项是一个函数，包含 3 个参数：

  • content，string 类型。图标内容。
  • name，string 类型。图标名称。
  • prefix，string 类型。图标集前缀。

该函数应返回修改后的内容。 如果无需修改，则应返回原始的 content 值。

示例 ​

以下示例展示了如何使用 customise 选项更改 Tabler 图标 中的 stroke-width：

jsaddIconSelectors({
   prefixes: ['tabler'],
   customise: (content, name, prefix) => {
       switch (prefix) {
           case 'tabler':
               return content.replaceAll('stroke-width="2"', 'stroke-width="1.5"');
       }
       return content;
   }
})

冲突 ​

如果您在 prefixes 选项 的配置项中也使用了 customise 选项，则该回调具有优先权，主 customise 将不会用于该图标集。