如何在VS Code文本装饰中使用内置ThemeIcon作为 gutter 图标？

vscode.window.createTextEditorDecorationType() 的 gutterIconPath 参数仅接受字符串类型的文件路径，并不支持 vscode.ThemeIcon 对象——这和 TreeView 组件的 iconPath 设计不同，TreeView 专门做了对 ThemeIcon 的兼容处理。

方案1：复制内置图标SVG到扩展目录（最稳定） #

直接将VS Code内置的circle-outline图标对应的SVG文件复制到你的扩展media目录，沿用原本的本地路径引用方式即可。

步骤：

• 找到VS Code安装目录下的内置图标SVG（Windows路径通常为C:\Program Files\Microsoft VS Code\resources\app\extensions\theme-defaults\icons，macOS为/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/theme-defaults/icons）
• 找到circle-outline.svg文件，复制到你的扩展media文件夹
• 使用如下代码：

const decorationType = vscode.window.createTextEditorDecorationType({
  gutterIconPath: context.asAbsolutePath('media/circle-outline.svg'),
  // 其他装饰配置
});

方案2：通过API获取当前主题的图标路径（适配主题） #

如果需要跟随用户当前的图标主题显示对应图标，可以通过以下方式获取内置图标的实际文件路径：

import * as vscode from 'vscode';
import * as path from 'path';

async function getThemeIconPath(iconId: string): Promise<string | undefined> {
  const iconTheme = vscode.workspace.getConfiguration('workbench').get<string>('iconTheme') || 'vs';
  const extension = vscode.extensions.getExtension(`vscode.${iconTheme}`);
  if (!extension) return undefined;
  
  // 以默认主题的路径结构为例，不同主题可能有差异
  const iconPath = path.join(extension.extensionPath, 'icons', `${iconId}.svg`);
  return iconPath;
}

// 使用示例
getThemeIconPath('circle-outline').then(iconPath => {
  if (iconPath) {
    const decorationType = vscode.window.createTextEditorDecorationType({
      gutterIconPath: iconPath,
      // 其他装饰配置
    });
  }
});

注意：不同图标主题的文件结构可能存在差异，需要针对主流主题做适配，兼容性不如方案1。

方案3：使用CSS装饰器（进阶） #

通过before伪元素结合VS Code内置的Codicon字体实现，自动适配主题样式：

const decorationType = vscode.window.createTextEditorDecorationType({
  gutterIconSize: '0', // 隐藏默认图标占位
  before: {
    content: '\\e909', // circle-outline对应的Codicon字符编码
    fontFamily: 'codicon',
    fontSize: '16px',
    marginRight: '4px',
    color: 'var(--vscode-icon-foreground)'
  }
});

目标图标的Codicon字符编码，可以通过VS Code开发者工具查看TreeView中对应图标的CSS内容获取。

内容的提问来源于stack exchange，提问作者Marvellous Lunatic