产品图标参考

Visual Studio Code 包含一组内置图标，这些图标用于视图和编辑器中，但也可以用于悬停提示、状态栏以及扩展中。这些图标是产品图标，与文件图标不同，后者在整个用户界面中用于文件名旁边。

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库中的哪个图标，预览显示了该图标的外观。

Product Icon Themes 可以单独替换每个图标，以及来自 codicon 库的所有图标。