產品圖示主題
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。
示例
可以使用 產品顏色主題示例 作為試驗場。