自訂圖示

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 將覆寫預設的 close 圖示。

如果您的圖示使用之前未使用過的名稱，則會將其新增為新的圖示。 例如，/custom/icons/example.svg 將建立一個新的圖示，可透過 <span uk-icon="example"></span> 使用。

若要檢查已在使用的名稱，請查看 /src/images/components 和 /src/images/icons 這兩個目錄。 當您建立新的圖示時，請確保這兩個資料夾中都沒有使用相同的名稱。 否則，它將覆寫包含的圖示。