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 如果您已将图标全局添加到UIkitdist/js/uikit-icons-mytheme.js 如果图标只在UIkit主题中如果使用现有名称创建图标，则将覆盖具有相同名称的默认图标。 例如，/custom/icons/close.svg 将覆盖默认的关闭图标。
如果您的图标使用以前从未使用过的名称，则会将其添加为新图标。例如，/custom/icons/example.svg 将创建一个新图标，可以通过代码 <span uk-icon="example"></span>调用。
要检查已经使用了哪些名称，请查看这两个目录 /src//images/components 和 /src//images/icons。创建新图标时，请确保在这两个文件夹中的任何一个中均未使用相同的名称。 否则，它将覆盖包含的图标。
上一篇： Webpack
下一篇： Avoiding-conflicts
# 自定义图标 <p class="uk-text-lead">UIkit的图标库可以用自己的图标文件进行扩展和自定义。</p> UIkit的图标库包含在一个JavaScript文件中，里面有很多SVG图标，`uikit-icons.min.js`此文件包含所有图标，不需要其他SVG文件。在本文档中，我们将介绍如何将自己的图标添加到此库或覆盖现有图标。查看图标组件 [Icon 组件](icon.md) 以了解默认图标的说明。 *** ## Add and overwrite icons-添加和覆盖图标 您可以覆盖UIkit中的任何默认图标并创建其他图标。要进行准备，请 [从Github源设置UIkit](installation.md#compile-from-github-source)。现在，您可以添加自己的SVG图标，并将其包含在UIkit的构建过程中。 生成过程将在两个位置检查其他图标文件： 1. 自定义文件夹: `/custom/icons/*.svg` 2. 任何自定义主题: `/custom/mytheme/icons/*.svg` 编译UIkit以包括其他图标: ```sh yarn compile ``` 您的附加图标现在将添加到图标库中，位于以下两个位置之一: 1. `dist/js/uikit-icons.js` 如果您已将图标全局添加到UIkit 2. `dist/js/uikit-icons-mytheme.js` 如果图标只在UIkit主题中 *** ## Avoid naming conflicts-避免命名冲突 如果使用现有名称创建图标，则将覆盖具有相同名称的默认图标。 例如，`/custom/icons/close.svg` 将覆盖默认的关闭图标。 如果您的图标使用以前从未使用过的名称，则会将其添加为新图标。例如，`/custom/icons/example.svg` 将创建一个新图标，可以通过代码 `<span uk-icon="example"></span>`调用。 要检查已经使用了哪些名称，请查看这两个目录 `/src/images/components` 和 `/src/images/icons`。创建新图标时，请确保在这两个文件夹中的任何一个中均未使用相同的名称。 否则，它将覆盖包含的图标。