产品图标主题

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 列表，视图通过该列表引用图标。产品图标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。

开发工具 检查工具

样本

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

11/1/2023