当现有图标主题不支持特殊文件名（如.env.production.local）或内部dsl时，才需自建图标扩展；用yo code生成结构，严格配置icondefinitions、fileextensions和filenames，并确保svg路径正确。
vscode-icons 和 material-icon-theme 都不满足需求时才考虑自建
自己写图标扩展不是为了“看起来高级”，而是当现有主题完全不支持你项目里那些奇奇怪怪的文件名（比如 .env.production.local、docker-compose.override.yml）或内部 DSL 文件（如 workflow.def）时，才值得动手。否则纯属重复造轮子——material-icon-theme.files.associations 和 vsicons.associations.files 已覆盖 95% 的常见场景。
用 yo code 创建基础结构，别手写 package.json
VSCode 官方推荐用脚手架生成最小可行扩展，避免漏掉关键字段。运行命令前确保已全局安装 @vscode/vsce 和 yo：
npm install -g yo generator-code yo code
选择 “New Extension (TypeScript)” → 填写 ID（如 my-file-icons）→ 选 “Yes, I want to create an icon theme” → 完成后会生成 icons/my-icon-theme.json 和预设的 package.json。
关键点：
-
package.json中"contributes.icons"必须包含"id"（和你在yo code里填的一致）、"label"、"path"（指向你的 JSON 配置文件） -
icons/my-icon-theme.json里不能缺"iconDefinitions"—— 即使只定义一个图标，也得先声明"_file"这个基础项，否则整个主题加载失败 - SVG 图标必须放在
icons/目录下，路径是相对于my-icon-theme.json的相对路径，比如"./icons/env.svg"
iconDefinitions + fileExtensions + fileNames 三者必须配齐
只写 "fileExtensions": { "def": "workflow" } 是没用的，VSCode 不知道 "workflow" 指哪个 SVG。你得先在 "iconDefinitions" 里注册它：
{
"iconDefinitions": {
"workflow": {
"iconPath": "./icons/workflow.svg"
}
},
"fileExtensions": {
"def": "workflow"
},
"fileNames": {
"workflow.def": "workflow"
}
}
注意区别：
-
fileExtensions匹配后缀（.def），不带点；fileNames匹配完整文件名（workflow.def），带点且区分大小写 - 如果想让
.env.local显示齿轮图标，只能靠fileNames（因为它是多段后缀，fileExtensions只认最后一个local） - 所有图标名（如
"workflow"）必须在iconDefinitions中有对应定义，拼错一个字母就 fallback 到默认图标
调试阶段别打包，直接 F5 启动 Extension Development Host
改完 my-icon-theme.json 后，按 F5 启动调试环境，新窗口会自动加载你的图标主题。这时去命令面板执行 Preferences: File Icon Theme，就能看到 My File Icons（或你设的 label）出现在列表里。
容易卡住的地方：
- 启动后图标仍不显示？检查开发者工具（
Help → Toggle Developer Tools）控制台有没有报错，常见的是 SVG 路径 404 或iconDefinitions缺字段 - 选中主题后资源管理器没刷新？执行
Developer: Reload Window，别重启整个 VSCode - 工作区
.vscode/settings.json里有"workbench.iconTheme": null？它会静默屏蔽你刚写的主题，删掉这行再试
真正麻烦的从来不是写配置，而是 SVG 图标本身——颜色要适配深色/浅色主题，尺寸得严格对齐 16×16 像素，还得导出为无嵌入样式的纯路径。多数人做到这一步就放弃了，转头去给 material-icon-theme 提 PR。
