🚀 在 VS Code 中！

產品圖示主題

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 字型。

  • 將 'woff' 設定為格式。
  • weight 屬性值在此處定義。
  • style 屬性值在此處定義。
{
  "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。

dev tools inspect tool

範例

產品色彩佈景主題範例可以用作遊樂場。

04/03/2025