Skip to content
微信公众号

文件图标主题

Visual Studio Code 在整个 UI 中的文件名旁边显示图标,并且扩展可以提供新的文件图标集供用户选择。

添加新的文件图标主题

您可以从图标(最好是 SVG)和图标字体创建您自己的文件图标主题。例如,查看两个内置主题:Minimal和Seti。

首先,创建一个 VS Code 扩展并添加iconTheme贡献点。

js
{
  "contributes": {
    "iconThemes": [
      {
        "id": "turtles",
        "label": "Turtles",
        "path": "./fileicons/turtles-icon-theme.json"
      }
    ]
  }
}

是id图标主题的标识符。它在设置中用作标识符,因此请使其唯一且可读。label显示在文件图标主题选择器下拉列表中。指向path扩展中定义图标集的文件。如果您的图标集名称遵循*icon-theme.json名称方案,您将获得补全支持并悬停在 VS Code 中。

文件图标集文件

文件图标集文件是一个 JSON 文件,由文件图标关联和图标定义组成。

图标关联将文件类型(“文件”、“文件夹”、“json 文件”...)映射到图标定义。图标定义定义图标所在的位置:可以是图像文件,也可以是字体中的字形。

图标定义

本iconDefinitions节包含所有定义。每个定义都有一个 id,用于引用该定义。一个定义也可以被多个文件关联引用。

js
{
  "iconDefinitions": {
    "_folder_dark": {
      "iconPath": "./images/Folder_16x_inverse.svg"
    }
  }
}

上面的图标定义包含带有标识符的定义_folder_dark。

支持以下属性:

  • iconPath:使用 svg/png 时:图像的路径。
  • fontCharacter:使用字形字体时:要使用的字体中的字符。
  • fontColor:使用字形字体时:字形使用的颜色。
  • fontSize:使用字体时:字体大小。默认情况下,使用字体规范中指定的大小。应为父字体大小的相对大小(例如 150%)。
  • fontId:使用字体时:字体的 id。如果未指定,将选择字体规范部分中指定的第一个字体。

文件关联

图标可以与文件夹、文件夹名称、文件、文件扩展名、文件名和语言 ID相关联。

此外,这些关联中的每一个都可以针对“浅色”和“高对比度”颜色主题进行细化。

每个文件关联都指向一个图标定义。

js
{
  "file": "_file_dark",
  "folder": "_folder_dark",
  "folderExpanded": "_folder_open_dark",
  "folderNames": {
    ".vscode": "_vscode_folder"
  },
  "fileExtensions": {
    "ini": "_ini_file"
  },
  "fileNames": {
    "win.ini": "_win_ini_file"
  },
  "languageIds": {
    "ini": "_ini_file"
  },
  "light": {
    "folderExpanded": "_folder_open_light",
    "folder": "_folder_light",
    "file": "_file_light",
    "fileExtensions": {
      "ini": "_ini_file_light"
    }
  },
  "highContrast": {}
}
  • file是默认文件图标,针对与任何扩展名、文件名或语言 ID 不匹配的所有文件显示。目前,文件图标定义定义的所有属性都将被继承(仅与字体字形相关,对 fontSize 有用)。
  • folder是折叠文件夹的文件夹图标,如果folderExpanded未设置,也适用于展开的文件夹。可以使用该属性关联特定文件夹名称的图标folderNames。文件夹图标是可选的。如果未设置,则不会显示文件夹图标。
  • folderExpanded是展开文件夹的文件夹图标。展开的文件夹图标是可选的。folder如果未设置,将显示为其定义的图标。
  • folderNames将文件夹名称与图标相关联。该集合的键是文件夹名称,可以选择以单个父路径段 (*) 作为前缀。不支持模式或通配符。文件夹名称匹配不区分大小写。
  • folderNamesExpanded将文件夹名称与展开文件夹的图标相关联。该集合的键是文件夹名称,可以选择以单个父路径段 (*) 作为前缀。不支持模式或通配符。文件夹名称匹配不区分大小写。
  • rootFolder是折叠的工作区根文件夹的文件夹图标,如果rootFolderExpanded未设置,也适用于展开的工作区根文件夹。folder如果未设置,将为工作区根文件夹显示定义的图标。
  • rootFolderExpanded是展开的工作区根文件夹的文件夹图标。rootFolder如果未设置,将为扩展的工作区根文件夹显示定义的图标。
  • rootFolderNames将根文件夹名称与图标相关联。该集合的关键是文件夹名称。不支持模式或通配符。根文件夹名称匹配不区分大小写。
  • rootFolderNamesExpanded将根文件夹名称与展开文件夹的图标相关联。该集合的关键是文件夹名称。不支持模式或通配符。根文件夹名称匹配不区分大小写。
  • languageIds将语言与图标关联起来。该集合中的键是语言贡献点中定义的语言 ID 。文件的语言是根据语言贡献中定义的文件扩展名和文件名来评估的。请注意,不考虑语言贡献的“第一行匹配”。
  • fileExtensions将文件扩展名与图标相关联。该集合中的关键是文件扩展名。扩展名是点后面的文件名段(不包括点)。带有多个点的文件名例如lib.d.ts可以匹配多个扩展名;“d.ts”和“ts”。或者,文件扩展名可以以单个父路径段 (*) 为前缀。扩展名的比较不区分大小写。
  • fileNames将文件名与图标相关联。该集中的键是完整的文件名,不包括任何路径段。或者,文件扩展名可以以单个父路径段 (*) 为前缀。不支持模式或通配符。文件名匹配不区分大小写。“文件名”匹配是最强的匹配,与文件名关联的图标将优先于匹配文件扩展名和匹配语言 ID 的图标。

(*) 某些属性键(folderNames、folderNamesExpanded、fileExtensions、fileNames)可以以单个父路径段为前缀。仅当资源的直接父文件夹与父路径文件夹匹配时才会使用该图标。这可用于为特定文件夹(例如system)中的资源提供不同的外观:

js
"fileNames": {
    "system/win.ini": "_win_ini_file"
  },

system/win.ini表示关联匹配win.ini直接在文件夹中调用的文件system

js
"fileExtensions": {
    "system/ini": "_ini_file"
  },

system/ini表示关联匹配*.ini直接在文件夹中调用的文件system

文件扩展名匹配优于语言匹配,但弱于文件名匹配。具有父路径段的匹配优于不具有此类同类段的匹配。

file name match with parent > file name match > file extension match with parent > file extension match > language match ...

和light部分highContrast具有与刚刚列出的相同的文件关联属性。它们允许覆盖相应主题的图标。

字体定义

该fonts部分允许您声明要使用的任意数量的字形字体。您稍后可以在图标定义中引用这些字体。如果图标定义未指定字体 ID,则首先声明的字体将用作默认字体。

将字体文件复制到您的扩展中并相应地设置路径。推荐使用WOFF字体。

  • 将“woff”设置为格式。
  • 权重属性值在此处定义。
  • 样式属性值在此处定义。
  • 大小应与使用图标的字体大小相关。因此,始终使用百分比。
js
{
  "fonts": [
    {
      "id": "turtles-font",
      "src": [
        {
          "path": "./turtles.woff",
          "format": "woff"
        }
      ],
      "weight": "normal",
      "style": "normal",
      "size": "150%"
    }
  ],
  "iconDefinitions": {
    "_file": {
      "fontCharacter": "\\E002",
      "fontColor": "#5f8b3b",
      "fontId": "turtles-font"
    }
  }
}

文件图标主题中的文件夹图标

当文件夹图标足以指示文件夹的展开状态时,文件图标主题可以指示文件资源管理器不显示默认文件夹图标(旋转三角形或“扭曲”)。"hidesExplorerArrows":true通过在文件图标主题定义文件中设置来启用此模式。

语言默认图标

语言贡献者可以为该语言定义一个图标。

js
{
  "contributes": {
    "languages": [
      {
        "id": "latex",
        // ...
        "icon": {
          "light": "./icons/latex-light.png",
          "dark": "./icons/latex-dark.png"
        }
      }
  ]

如果文件图标主题仅具有该语言的通用文件图标,则使用该图标。

仅在以下情况下才显示语言默认图标:

  • 文件图标主题具有特定的文件图标。例如,Minimal没有特定的文件图标,因此不使用语言默认图标
  • 文件图标主题不包含给定语言、文件扩展名或文件名的图标。
  • 文件图标主题未定义"showLanguageModeIcons":false
  • 如果满足以下条件,则始终显示语言默认图标:文件图标主题确实定义了"showLanguageModeIcons":true

本站总访问量次,本站总访客数人次
Released under the MIT License.