产品图标参考

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 定义额外的图标，同时提供一个默认图标。然后，该图标 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 库中的所有图标。