# 图标主题
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
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
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
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字体。
"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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 图标主题中的文件夹图标
文件图标主题会告诉文件浏览器不要显示默认文件夹图标(倒三角或者横杠),这个模式可在配置中加入"hidesExplorerArrows":true
覆盖默认VS Code的设置。