产品图标参考

Visual Studio Code 包含一组内置图标，这些图标用于视图和编辑器中，但也可以用于悬停、状态栏以及扩展中。这些图标是 **产品图标**，而不是 **文件图标**，文件图标用于 UI 中的整个文件名旁边。

与 VS Code 一起提供的产品图标包含在 Codicon 图标字体 中，并构成 **默认** 产品图标主题。扩展可以提供新的 产品图标主题 来重新定义这些图标，并为 VS Code 提供新的外观。

为了允许这样做，所有产品图标都由一个 ID 标识。图标标识符是在标签（$(pencil)）中、API 中作为 ThemeIcon 以及需要图标的贡献中用于 UI 组件的标识符。

图标标识符与实际图标字体字形的关联是在产品图标主题中完成的。

标签中的图标

图标可以在悬停中的 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 库中的所有图标。