– 代理会话日,2月19日

产品图标主题

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 字体。

  • 将 'woff' 设置为格式。
  • 权重属性值定义 此处
  • 样式属性值定义 此处
{
  "fonts": [
    {
      "id": "alien-font",
      "src": [
        {
          "path": "./alien.woff",
          "format": "woff"
        }
      ],
      "weight": "normal",
      "style": "normal"
    }
  ]
}

图标定义

VS Code 通过视图引用图标的列表定义了一组图标 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

dev tools inspect tool

示例

可以把 产品颜色主题示例 用作游乐场。

© . This site is unofficial and not affiliated with Microsoft.