產品圖示主題
Visual Studio Code 包含一套內建圖示，用於檢視和編輯器中，但也可以在懸停提示、狀態列甚至擴充套件中引用。例如，篩選器操作按鈕和檢視中的圖示、狀態列中的圖示、斷點，以及樹和編輯器中的摺疊圖示。
產品圖示主題允許擴充套件重新定義這些圖示，從而為 VS Code 提供自定義外觀。檔案圖示（由檔案圖示主題覆蓋）和擴充套件貢獻的圖示不屬於產品圖示主題的範圍。
VS Code 要求圖示以圖示字型中的字形形式定義，並且（目前）將產品圖示限制為由單一顏色組成。圖示使用的顏色取決於其顯示位置，並由活動顏色主題定義。
新增新的產品圖示主題
要定義自己的產品圖示主題，請首先建立一個 VS Code 擴充套件，並將 productIconThemes 貢獻點新增到擴充套件的 package.json 中。
{
"contributes": {
"productIconThemes": [
{
"id": "aliensAreBack",
"label": "Aliens Are Back",
"path": "./producticons/aliens-product-icon-theme.json"
}
]
}
}
id 是產品圖示主題的識別符號。它在設定中使用，因此請確保其唯一且易讀。label 顯示在產品圖示主題選擇器下拉列表中。path 指向擴充套件中定義圖示集的檔案。如果您的檔名遵循 *product-icon-theme.json 命名方案，則在 VS Code 中編輯產品圖示主題檔案時將獲得完成支援和懸停提示。
產品圖示定義檔案
產品圖示定義檔案是一個 JSON 檔案，定義了一個或多個圖示字型和一組圖示定義。
字型定義
fonts 部分允許您宣告任意數量要使用的字形字型，但必須至少定義一個字型定義。
這些字型可以在圖示定義中引用。如果圖示定義未指定字型 ID，則將使用首先宣告的字型作為預設值。
將字型檔案複製到您的擴充套件中並相應地設定路徑。
建議您使用 WOFF 字型。
{
"fonts": [
{
"id": "alien-font",
"src": [
{
"path": "./alien.woff",
"format": "woff"
}
],
"weight": "normal",
"style": "normal"
}
]
}
圖示定義
VS Code 透過檢視引用圖示的圖示 ID 列表。產品圖示的 iconDefinitions 部分將新圖示分配給這些 ID。
每個定義都使用 fontId 來引用 fonts 部分中定義的字型之一。如果省略 fontId，則使用字型定義中列出的第一個字型。
{
"iconDefinitions": {
"dialog-close": {
"fontCharacter": "\\43",
"fontId": "alien-font"
}
}
}
所有圖示識別符號的列表可在圖示參考中找到。
開發和測試
VS Code 為 package.json 檔案以及產品圖示主題檔案提供了內建編輯支援。為此，您的主題檔名需要以 product-icon-theme.json 結尾。這將啟用所有屬性（包括已知圖示 ID）的程式碼補全以及懸停提示和驗證。
要試用產品圖示主題，請在 VS Code 中開啟擴充套件資料夾，然後按 F5。這將在擴充套件開發主機視窗中執行該擴充套件。該視窗將啟用您的擴充套件，並且擴充套件將自動切換到第一個產品圖示主題。
此外，主題檔案會進行監視，並且圖示的更新將在主題檔案修改時自動應用。當您處理產品圖示定義檔案時，您將在儲存時即時看到更改。
要在產品圖示主題之間切換，請使用命令 **首選項：產品圖示主題**。
要找出 VS Code UI 中某個位置使用的圖示，請執行 **幫助 > 切換開發人員工具** 開啟開發人員工具，然後
- 單擊左上角的開發人員工具檢查工具。
- 將滑鼠懸停在要檢查的圖示上。
- 如果圖示的類名為
codicon.codicon-remote，則圖示 ID 為remote。
示例
產品顏色主題示例可用作試驗場。