# 图标主题

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

# 添加新的图标主题

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

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

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

1
2
3
4
5
6
7
8
9

id作为这个图标主题的标识，目前只做内部使用，未来可能会用在设置里面，所以最好设置一个可读性强的唯一值。
label会显示在主题选择下拉框中。
path指示了图标集所在的位置。如果你的图标系列名称遵循*icon-theme.json命名规范，那么VS Code就能提供完整的支持。

# 图标文件集(Icon set file)

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

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

# 图标定义

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

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

1
2
3
4
5

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

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

# 关联文件

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

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

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

"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": {
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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'
字重键值的定义参考这里
样式键值对的定义参考在这里
使用图标引用该字体时的字号。因此字体字号总是以百分比表示。

"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"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

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

← 色彩主题树视图 →