产品图标主题
Visual Studio Code 包含一套内置图标，用于视图和编辑器中，也可以在悬停提示、状态栏甚至扩展中引用。例如过滤器操作按钮中的图标、视图图标、状态栏图标、断点图标以及树形结构和编辑器中的折叠图标。
产品图标主题允许扩展重定义这些图标，从而为 VS Code 提供自定义外观。产品图标主题不涵盖文件图标（由文件图标主题涵盖）以及由扩展贡献的图标。
VS Code 要求图标定义为图标字体中的字形（glyph），并且（目前）限制产品图标为单色。图标所使用的颜色取决于其显示的具体位置，并由当前激活的颜色主题定义。
添加新的产品图标主题
要定义自己的产品图标主题，请先创建一个 VS Code 扩展，并在扩展的 package.json 中添加 productIconThemes 贡献点。
{
"contributes": {
"productIconThemes": [
{
"id": "aliensAreBack",
"label": "Aliens Are Back",
"path": "./producticons/aliens-product-icon-theme.json"
}
]
}
}
id 是产品图标主题的标识符。它会在设置中使用，因此请确保其既唯一又易于阅读。label 会显示在产品图标主题选择下拉菜单中。path 指向扩展中定义图标集的文件。如果您的文件名遵循 *product-icon-theme.json 的命名规则，您在 VS Code 中编辑产品图标主题文件时将获得补全支持和悬停提示。
产品图标定义文件
产品图标定义文件是一个 JSON 文件，用于定义一个或多个图标字体及一组图标定义。
字体定义
fonts 部分允许您声明任意数量要使用的字形字体，但必须至少定义一种字体。
这些字体随后可在图标定义中被引用。如果图标定义未指定字体 ID，则默认使用首先声明的字体。
将字体文件复制到您的扩展中并相应地设置路径。
建议您使用 WOFF 格式字体。
{
"fonts": [
{
"id": "alien-font",
"src": [
{
"path": "./alien.woff",
"format": "woff"
}
],
"weight": "normal",
"style": "normal"
}
]
}
图标定义
VS Code 定义了一系列图标 ID，视图通过这些 ID 引用图标。产品图标的 iconDefinitions 部分将新图标分配给这些 ID。
每个定义都使用 fontId 来引用 fonts 部分中定义的字体之一。如果省略 fontId，则使用字体定义列表中列出的第一个字体。
{
"iconDefinitions": {
"dialog-close": {
"fontCharacter": "\\43",
"fontId": "alien-font"
}
}
}
所有图标标识符的列表可以在图标参考中找到。
开发与测试
VS Code 对 package.json 文件以及产品图标主题文件具有内置的编辑支持。要获得此支持，您的主题文件名需要以 product-icon-theme.json 结尾。这将启用所有属性的代码补全（包括已知的图标 ID）、悬停提示和验证。
要试用产品图标主题，请在 VS Code 中打开扩展文件夹并按下 F5。这将在扩展开发宿主窗口中运行该扩展。该窗口已启用您的扩展，并且扩展将自动切换到第一个产品图标主题。
此外，主题文件会被监控，每当修改主题文件时，图标的更新都会自动应用。在处理产品图标定义文件时，您保存后即可实时看到更改。
要在产品图标主题之间切换，请使用命令 Preferences: Product Icon Theme。
要找出 VS Code UI 中某个位置使用了哪个图标，请运行 Help > Toggle Developer Tools 打开开发人员工具，然后：
- 点击左上角的开发人员工具检查工具。
- 将鼠标移动到要检查的图标上。
- 如果该图标的类名为
codicon.codicon-remote，则图标 ID 为remote。
示例
您可以将 产品图标主题示例 用作练习场地。