自定义图标

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

UIkit 的图标库包含许多捆绑在单个 JavaScript 文件 uikit-icons.min.js 中的 SVG 图标。此文件包含所有图标，无需额外的 SVG 文件。在本文档中，我们将介绍如何将您自己的图标添加到此库或覆盖现有图标。请查看 图标组件 以了解默认图标的概述。

添加和覆盖图标

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

构建过程将检查两个位置以查找其他图标文件

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

编译 UIkit 以包含其他图标

pnpm compile

您的其他图标现在将被添加到图标库中，位于以下两个位置之一

• 如果您已将图标全局添加到 UIkit，则位于 dist/js/uikit-icons.js
• 如果该图标仅在 UIkit 主题内，则位于 dist/js/uikit-icons-mytheme.js

避免命名冲突

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

如果您的图标使用之前未使用过的名称，则它将作为新图标添加。例如，/custom/icons/example.svg 将创建一个新图标，可以通过 <span uk-icon="example"></span> 使用。

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