產品圖示參考

Visual Studio Code 包含一組內建圖示，這些圖示用於檢視和編輯器中，但也可以用於浮動提示、狀態列和擴充功能。這些圖示是產品圖示，相對於檔案圖示，檔案圖示用於整個 UI 中檔案名稱的旁邊。

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

為了允許這樣做，所有產品圖示都由 ID 識別。圖示識別碼是在標籤 ($(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 的所有位置使用圖示 ID (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 程式庫中的所有圖示。