产品图标主题
Visual Studio Code 包含一组内置图标,这些图标在视图和编辑器中使用,但也可以在悬停、状态栏甚至扩展中引用。例如,筛选操作按钮和视图图标中的图标、状态栏中的图标、断点以及树和编辑器中的折叠图标。
产品图标主题允许扩展重新定义这些图标,以使 VS Code 具有自定义外观。产品图标主题不包括文件图标(由文件图标主题覆盖)和扩展贡献的图标。
VS Code 要求将图标定义为图标字体中的字形,并且(目前)将产品图标限制为单色。用于图标的颜色特定于其显示的位置,并由活动颜色主题定义。
添加新的产品图标主题
要定义自己的产品图标主题,请从创建一个 VS Code 扩展开始,并将 productIconThemes
贡献点添加到扩展的 package.json
中。
{
"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。这将在扩展开发主机窗口中运行扩展。该窗口已启用您的扩展,并且扩展将自动切换到第一个产品图标主题。
此外,主题文件将被监视以查看是否有更改,并且只要主题文件被修改,图标更新就会自动应用。在您处理产品图标定义文件时,您将在保存时看到实时更改。
要切换产品图标主题,请使用命令 首选项:产品图标主题。
要找出在 VS Code UI 的某个特定位置使用哪个图标,请通过运行 帮助 > 切换开发人员工具 来打开开发人员工具,然后
- 单击左上角的开发人员工具检查工具。
- 将鼠标悬停在图标上以检查。
- 如果图标的类名为
codicon.codicon-remote
,则图标 ID 为remote
。
示例
产品颜色主题示例 可用作游乐场。