產品圖示主題
Visual Studio Code 包含一組內建圖示，用於檢視與編輯器中，但也可用於懸停提示 (hovers)、狀態列，甚至由擴充功能參照。例如篩選操作按鈕中的圖示與檢視圖示、狀態列圖示、中斷點，以及樹狀結構與編輯器中的摺疊圖示。
產品圖示佈景主題允許擴充功能重新定義這些圖示，為 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。這將會在擴充功能開發主機視窗中執行擴充功能。該視窗將啟用您的擴充功能，並自動切換至第一個產品圖示佈景主題。
此外，系統會監控佈景主題檔案的變更，每當檔案修改時，圖示更新都會自動套用。當您處理產品圖示定義檔時，儲存後即可即時看到變更。
若要切換產品圖示佈景主題，請使用 Preferences: Product Icon Theme 指令。
若要找出 VS Code UI 中某個位置所使用的圖示，請執行 Help > Toggle Developer Tools 開啟開發者工具，然後：
- 點擊開發者工具左上角的檢查工具。
- 將滑鼠游標移至要檢查的圖示上。
- 如果該圖示的類別名稱為
codicon.codicon-remote，則圖示 ID 為remote。
範例
您可以將 Product Color Theme 範例當作練習場使用。