UIkitのアイコンライブラリは、独自のアイコンファイルで拡張およびカスタマイズできます。
UIkitのアイコンライブラリには、単一のJavaScriptファイル`uikit-icons.min.js`にバンドルされた多数のSVGアイコンが含まれています。このファイルにはすべてのアイコンが含まれており、追加のSVGファイルは必要ありません。このドキュメントでは、このライブラリに独自のアイコンを追加する方法、または既存のアイコンを上書きする方法について説明します。デフォルトのアイコンの概要については、アイコンコンポーネントをご覧ください。
UIkitのデフォルトアイコンを上書きしたり、追加のアイコンを作成したりできます。準備として、GitHubソースからUIkitをセットアップしてください。これで、独自のSVGアイコンを追加して、UIkitのビルドプロセスに含めることができます。
ビルドプロセスでは、追加のアイコンファイルについて2つの場所がチェックされます
追加のアイコンを含めるようにUIkitをコンパイルします
pnpm compile追加したアイコンは、次の2つの場所のいずれかにアイコンライブラリに追加されます
既存の名前でアイコンを作成すると、同じ名前のデフォルトアイコンが上書きされます。たとえば、`/custom/icons/close.svg`はデフォルトの閉じるアイコンを上書きします。
アイコンが以前に使用されていない名前を使用する場合、新しいアイコンとして追加されます。たとえば、`/custom/icons/example.svg`は、`<span uk-icon="example"></span>`を介して使用できる新しいアイコンを作成します。
すでに使用されている名前を確認するには、` /src/images/components`と `/src/images/icons`の2つのディレクトリを確認してください。新しいアイコンを作成するときは、これら2つのフォルダのいずれでも同じ名前が使用されていないことを確認してください。そうでない場合、含まれているアイコンが上書きされます。