UIkit3.x文档

自定义图标

UIkit的图标库可以用自己的图标文件进行扩展和自定义。

UIkit的图标库包含在一个JavaScript文件中,里面有很多SVG图标, uikit-icons.min.js此文件包含所有图标,不需要其他SVG文件。在本文档中,我们将介绍如何将自己的图标添加到此库或覆盖现有图标。查看图标组件Icon 组件 以了解默认图标的说明。


添加和覆盖图标

您可以覆盖UIkit中的任何默认图标并创建其他图标。要进行准备,请 从Github源设置UIkit。现在,您可以添加自己的SVG图标,并将其包含在UIkit的构建过程中。

生成过程将在两个位置检查其他图标文件:

  • 自定义文件夹: /custom/icons/*.svg
  • 任何自定义主题: /custom/mytheme/icons/*.svg

编译UIkit以包括其他图标:

yarn compile

您的附加图标现在将添加到图标库中,位于以下两个位置之一:

  • dist/js/uikit-icons.js 如果您已将图标全局添加到UIkit
  • dist/js/uikit-icons-mytheme.js 如果图标只在UIkit主题中

避免命名冲突

如果使用现有名称创建图标,则将覆盖具有相同名称的默认图标。 例如,/custom/icons/close.svg 将覆盖默认的关闭图标。

If your icon uses a name that has not been used before, it will be added as a new icon. For example, 如果您的图标使用以前从未使用过的名称,则会将其添加为新图标。例如, /custom/icons/example.svg 将创建一个新图标,可以通过代码<span uk-icon="example"></span>调用。

要检查已经使用了哪些名称,请查看这两个目录 /src/images/components/src/images/icons。创建新图标时,请确保在这两个文件夹中的任何一个中均未使用相同的名称。 否则,它将覆盖包含的图标。