Visual Studio Code

产品图标主题

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，视图通过这些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用户界面中某个位置使用了哪个图标，请通过运行帮助 > 切换开发者工具来打开开发者工具，然后：

  • 点击左上角的开发者工具检查工具。
  • 将鼠标悬停在图标上进行检查。
  • 如果图标的类名是 codicon.codicon-remote，那么图标ID是 remote。

开发工具检查工具

示例

产品颜色主题示例可以用作试验场。

12/11/2024