產品圖示參考

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