图标主题

VS Code的UI在文件名称左边显示图标，插件配置的图标系列可以让用户自由选择他们喜爱的图标。

添加新的图标主题

你能使用图标文件（最好是SVG）和字体图标创建自己的图标主题。作为示例，你可以参考一下2个内置主题：Minimal，Seti

首先，创建一个VS Code插件，然后把iconTheme配置点(contribution point)添加进去

  1. "contributes": {
  2.     "iconThemes": [
  3.         {
  4.             "id": "turtles",
  5.             "label": "Turtles",
  6.             "path": "./fileicons/turtles-icon-theme.json"
  7.         }
  8.     ]
  9. }
  • id作为这个图标主题的标识，目前只做内部使用，未来可能会用在设置里面，所以最好设置一个可读性强的唯一值。
  • label会显示在主题选择下拉框中。
  • path指示了图标集所在的位置。如果你的图标系列名称遵循*icon-theme.json命名规范，那么VS Code就能提供完整的支持。

图标文件集(Icon set file)

图标文件集是一个JSON文件，包含了所有的关联图标和图标定义。

一个关联图标将图标定义映射到一个文件上（类型如：文件，文件夹，json文件…）。图标定义指示了图标的所在位置：可以是一个图片文件，或者glyph字体。

图标定义

iconDefinitions部分包含了所有定义。每个定义有一个id，用于指向定义。一个定义能供多个文件关联引用。

  1. "iconDefinitions": {
  2.     "_folder_dark": {
  3.         "iconPath": "./images/Folder_16x_inverse.svg"
  4.     }
  5. }

这里，图标定义包含了一个标识符_folder_dark。除此之外还支持以下属性：

  • iconPath：当使用svg/png文件时：指向图片的路径。
  • fontCharacter：当使用glyph字体时：字体中使用的字符。
  • fontColor：当使用glyph字体时：设置glyph的颜色。
  • fontSize：当使用字体时：设置字体大小。默认情况下会使用字体本身定义的字体大小。这个值应为父级字号的相对值(如 150%)。
  • fontId：当使用字体时: 字体的ID。如果没有指定，则会采用font specification部分的第一个字体。

关联文件

图标能关联到文件夹，文件夹名称，文件，文件名称，文件插件，和语言Id。

这些关联都能被提炼为诸如’light’和’highContrast’色彩主题。

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

  1. "file": "_file_dark",
  2. "folder": "_folder_dark",
  3. "folderExpanded": "_folder_open_dark",
  4. "folderNames": {
  5.     ".vscode": "_vscode_folder",
  6. },
  7. "fileExtensions": {
  8.     "ini": "_ini_file",
  9. },
  10. "fileNames": {
  11.     "win.ini": "_win_ini_file",
  12. },
  13. "languageIds": {
  14.     "ini": "_ini_file"
  15. },
  16. "light": {
  17.     "folderExpanded": "_folder_open_light",
  18.     "folder": "_folder_light",
  19.     "file": "_file_light",
  20.     "fileExtensions": {
  21.         "ini": "_ini_file_light",
  22.     }
  23. },
  24. "highContrast": {
  25. }
  • file是一个默认文件图标，为那些没有匹配到任何插件、文件名、语言类型的文件所准备的。目前所有文件图标属性都会被继承(只适用于：glyphs字体、字体大小(fontSize))。
  • folder收起的文件夹图标，如果folderExpanded没有设置，那么展开的文件夹也会使用这个图标。使用folderNames关联特殊名称的文件夹。文件夹图标是可选的，如果不设置，那文件夹就不会显示任何图标。
  • folderExpanded展开的文件夹图标。这个图标是可选的，如果不设置就会使用folder定义好的图标。
  • folderNames特殊名称文件夹图标。这个键是用于文件夹名称的，不支持包含路径的名称，不支持匹配模式和通配符。大小写不敏感。
  • folderNamesExpanded展开的特殊名称文件夹图标。
  • rootFolder 收起的工作区根文件夹图标，如果rootFolderExpanded没有设置，那么展开的工作区根文件夹也会使用这个图标。如果不设置，则会使用folder定义的文件夹图标。
  • rootFolderExpanded 展开的工作区根文件夹图标。如果没有设置，则会使用rootFolder定义的文件夹图标。
  • languageIds语言类型图标。这个键将匹配在语言配置点（contribution point）配置的语言id。注意语言配置的’第一行’是不考虑在内的。
  • fileExtensions文件插件图标。根据文件插件的名称匹配。插件名称是文件名点号后面（不包含点号）。拥有多重点号的文件名称，如lib.d.ts会匹配多个模式——d.ts和ts。大小写敏感。
  • fileNames文件图标。这个键需要文件的全称进行匹配，不支持包含路径的名称，不支持模式和通配符。大小写敏感。fileNames是最高优先匹配。

匹配优先级：fileNames > fileExtensions > languageIds

light和highContrast部分的属性表和上面相同，只是会在对应的主题下覆盖原有图标配置。

字体定义

在’font’部分添加任意你喜欢的字形和字体。定义好之后，你就可以在图标定义中使用它们了。如果没有指定字体id，那么默认使用第一个定义的字体。

将字体文件移动到你的插件中，设置好对应的路径。推荐使用WOFF字体。

  • 设置格式为’woff’
  • 字重键值的定义参考这里
  • 样式键值对的定义参考在这里
  • 使用图标引用该字体时的字号。因此字体字号总是以百分比表示。
  1. "fonts": [
  2.     {
  3.         "id": "turtles-font",
  4.         "src": [
  5.             {
  6.                 "path": "./turtles.woff",
  7.                 "format": "woff"
  8.             }
  9.         ],
  10.         "weight": "normal",
  11.         "style": "normal",
  12.         "size": "150%"
  13.     }
  14. ],
  15. "iconDefinitions": {
  16.     "_file": {
  17.         "fontCharacter": "\\E002",
  18.         "fontColor": "#5f8b3b",
  19.         "fontId": "turtles-font"
  20.     }
  21. }

图标主题中的文件夹图标

文件图标主题会告诉文件浏览器不要显示默认文件夹图标（倒三角或者横杠），这个模式可在配置中加入"hidesExplorerArrows":true覆盖默认VS Code的设置。