產品圖示參考

Visual Studio Code 包含一套用於檢視和編輯器的內建圖示，這些圖示也可用於懸停提示、狀態列和擴充套件程式。這些圖示是產品圖示，與用於整個 UI 中檔名旁邊的檔案圖示不同。

VS Code 附帶的產品圖示包含在 Codicon 圖示字型中，並構成了預設產品圖示主題。擴充套件程式可以提供新的產品圖示主題來重新定義這些圖示，從而為 VS Code 提供全新的外觀。

為了實現這一點，所有產品圖示都透過 ID 進行標識。圖示識別符號用於 UI 元件的標籤中 ($(pencil))，在 API 中作為 ThemeIcon，並在需要圖示的貢獻點中使用。

圖示識別符號與實際圖示字型字形的關聯由產品圖示主題完成。

標籤中的圖示

圖示可用於懸停提示中的 Markdown 標籤、StatusBarItem 文字和 QuickPickItem 標籤 API。在 Markdown 中新增圖示的語法是 $(iconIdentifier)

$(alert);

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

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

要在標籤內放置字面量 ${...} 文字，請使用反斜槓轉義 $

\$(eye)

動畫

您可以透過在圖示名稱後附加 ~spin 來對以下圖示應用旋轉動畫

• sync
• loading
• gear

$(sync~spin)

圖示貢獻點

圖示貢獻點允許擴充套件程式透過 ID 定義附加圖示，並提供一個預設圖示。然後，該圖示 ID 可以由擴充套件程式（或依賴於該擴充套件程式的任何其他擴充套件程式）用於標籤 ($(iconId)) 或所有可以使用 ThemeIcon 的地方 (new ThemeIcon("iconId"))。

"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 庫的所有圖示。