产品图标主题
Visual Studio Code 包含一组内置图标,这些图标用于视图和编辑器,但也可以在悬停、状态栏甚至扩展中引用。 例如,过滤操作按钮中的图标、状态栏中的视图图标、断点以及树和编辑器中的折叠图标。
产品图标主题允许扩展重新定义这些图标,以使 VS Code 具有自定义外观。产品图标主题不包括文件图标(由文件图标主题覆盖)和扩展提供的图标。
VS Code 要求图标在图标字体中定义为 glyph,并且(目前)限制产品图标仅由一种颜色组成。图标所使用的颜色特定于其显示的位置,并由活动的颜色主题定义。
添加新的产品图标主题
要定义您自己的产品图标主题,请首先创建一个 VS Code 扩展并添加产品图标主题贡献点到扩展的package.json输入:.
{
"contributes": {
"productIconThemes": [
{
"id": "aliensAreBack",
"label": "外星人回来了",
"path": "./producticons/aliens-product-icon-theme.json"
}
]
}
}
该身份证是产品的图标主题标识符。它用于设置中,因此使其唯一但可读。Tab在产品图标主题选择器下拉菜单中显示。路径指向扩展中定义图标集的文件。如果您的文件名遵循*产品图标主题.json名称方案,当在 VS Code 中编辑产品图标主题文件时,您将获得完成支持和悬停。
产品图标定义文件
产品图标定义文件是一个JSON文件,定义一个或多个图标字体和一组图标定义。
字体定义
该字体该部分允许您声明任何数量的字形字体,但必须定义至少一种字体定义。
这些字体稍后可以在图标定义中引用。如果图标定义没有指定字体ID,则会使用第一个声明的字体作为默认字体。
将字体文件复制到您的扩展文件夹,并相应地设置路径。
建议您使用WOFF字体。
{
"字体": [
{
"id": "外星字体",
"源": [
{
"路径": "./alien.woff",
"格式": "woff"
}
],
"粗细": "正常",
"样式": "正常"
}
]
}
图标定义
VS Code 通过定义一组图标 ID 来通过这些图标 ID 来引用图标。产品的图标图标定义部分分配新的图标给这些ID。
每个定义使用字体ID引用在其中定义的一种字体字体部分。如果字体ID如果省略,则采用字体定义中列出的第一个字体。
{
"图标定义": {
"对话框关闭": {
"字体字符": "\\43",
"字体ID": "外星字体"
}
}
}
所有图标标识符的列表可以在图标参考中找到。
开发和测试
VS Code 内置了对 的编辑支持package.json文件以及产品图标主题文件。要获取该文件,您的主题文件名需要以 结尾。product-icon-theme.json这使得代码补全能够应用于所有属性,包括已知的图标ID以及悬停和验证。
要尝试一个产品图标主题,请在 VS Code 中打开扩展文件夹并按 F5。这将在扩展开发主机Windows中运行扩展。该Windows已启用您的扩展,并且扩展将自动切换到第一个产品图标主题。
此外,主题文件会监视更改,并且每当修改主题文件时,图标更新将自动应用。当您编辑产品图标定义文件时,保存时会看到更改实时生效。
要切换产品图标主题,请使用命令偏好设置:产品图标主题。
要查找 VS Code 用户界面中某个位置使用的图标,请通过运行 帮助 > 切换开发者工具 打开开发者工具,然后:
- 点击左上角的开发者工具检查工具。
- 将鼠标悬停在图标上以检查。
- 如果图标类名是
codicon.codicon-remote,那么图标ID是远程输入:.
![]()
样本
该产品颜色主题样本可以作为一个游乐场。