本站点文档内容均翻译自code.visualstudio.com,仅供个人学习,如有差异请以官网为准。

产品图标主题

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

  • 将 '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是远程输入:.

开发者工具检查工具

样本

产品颜色主题样本可以作为一个游乐场。