產品圖示主題
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 列表，檢視透過這些 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。
範例
產品色彩佈景主題範例可以用作遊樂場。