vscode 插件 Material Icon Theme 自定义文件和文件夹图标

755 阅读1分钟

Material Icon Theme 文档中已经给出了具体的操作方式,只不过我在使用时还是遇到一些小问题,所以打算简单记录一下。

官方文档的描述如下图所示:

image.png

具体操作方式如下:

自定义文件图标

  1. 先找一个 svg 图片,比如我找了一个 OneNote.svg 图标文件

  2. 将图标文件放到你的 vscode 用户目录,也就是 $USERPROFILE/.vscode/extensions/icons 文件夹中。比如我的图标文件就放在 C:\Users\k\.vscode\extensions\icons 文件夹中。

    image.png

  3. 在 vscode 的用户配置中,指定我们刚刚创建的 svg 图标。注意,Material Icon Theme 要求配置必须在用户 settings.json 中配置。也就是在 $USERPROFILE/.vscode/settings.json 中配置。可以通过快捷键 ctrl+shift+p 输入 >preferences: open application settings (JSON) 快速打开用户配置。

下面是一个配置示例,注意是两个上级目录 ../,而且不要有后缀名 .svg

    "material-icon-theme.files.associations": {
        "*.onenote": "../../icons/OneNote",
    },

image.png

自定义文件夹图标

步骤和上面类似,只有两个不同的地方:

  • 需要提供两个 svg 文件,一个正常命名,一个需要在命名后添加 -open。比如 OneNote.svgOneNote-open.svg
  • 配置项是 material-icon-theme.folders.associations,而且其中的上级目录 ../ 是四个。

效果预览

image.png

参考资料