產品圖示參考

Visual Studio Code 包含一套內建圖示，用於檢視區與編輯器中，同時也可用於懸停提示 (hovers)、狀態列以及擴充功能。這些圖示稱為產品圖示 (product icons)，與用於 UI 各處檔案名稱旁邊的檔案圖示 (file icons) 相區別。

隨 VS Code 發布的產品圖示包含在 Codicon 圖示字型中，並構成了預設的產品圖示佈景主題。擴充功能可以提供新的 產品圖示佈景主題 來重新定義這些圖示，賦予 VS Code 新的外觀。

為了實現此功能，所有產品圖示皆透過 ID 進行識別。圖示識別碼用於 UI 元件標籤中 ($(pencil))、API 中的 ThemeIcon，以及需要圖示的貢獻點 (contributions) 中。

將圖示識別碼與實際的圖示字型字形建立關聯的工作是在產品圖示佈景主題中完成的。

標籤中的圖示

圖示可用於懸停提示中的 Markdown 標籤、StatusBarItem 文字以及 QuickPickItem 標籤 API。在 Markdown 中加入圖示的語法為 $(iconIdentifier)

$(alert);

您也可以嵌入文字並使用多個圖示

$(eye) $(heart) $(mark-github) GitHub

若要在標籤內放置字面上的 ${...} 文字，請使用反斜線跳脫 $ 字元

\$(eye)

動畫

您可以透過在圖示名稱後加上 ~spin，為下列圖示套用旋轉動畫

• sync
• loading
• gear

$(sync~spin)

圖示貢獻點

圖示貢獻點允許擴充功能透過 ID 定義額外的圖示，並附帶一個預設圖示。接著，該擴充功能（或任何依賴此擴充功能的其他擴充功能）便可在標籤中 ($(iconId)) 或任何可以使用 ThemeIcon 的地方 (new ThemeIcon("iconId")) 使用該圖示 ID。

"contributes": {
  "icons": {
        "distro-ubuntu": {
            "description": "Ubuntu icon",
            "default": {
                "fontPath": "./distroicons.woff",
                "fontCharacter": "\\E001"
            }
        },
        "distro-fedora": {
            "description": "Ubuntu icon",
            "default": {
                "fontPath": "./distroicons.woff",
                "fontCharacter": "\\E002"
            }
        }
    }
}

產品圖示主題可以重新定義該圖示（前提是它們知道該圖示 ID）。

圖示列表

以下是按識別碼排列的內建產品圖示列表。

圖示的 ID 標識了該圖示使用的位置。預設的 codicon ID 說明了預設使用 codicon 函式庫中的哪個圖示，預覽則顯示了該圖示的外觀。

產品圖示佈景主題可以單獨替換每個圖示，也可以替換 codicon 函式庫中的所有圖示。