產品圖示參考

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)，以及預設圖示。然後，擴充功能 (或任何其他依賴擴充功能的擴充功能) 可以在標籤 ($(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 程式庫中的所有圖示。