如何使用“产品图标参考”作为WebView图标？

Question

有几个关于如何在 VSCode 扩展中使用 WebView 选项卡图标的答案，并且所有答案都使用本地文件，例如

.svg

类型（vscode 扩展 iconPath）。相反，我想使用此网站上的 VSCode 图标：https://code.visualstudio.com/api/references/icons-in-labels。这可能吗？如果是，怎么做？

我尝试以某种方式使用图标语法，如

package.json

中的

$(any-icon-identifier)

。但这对于

webview.iconPath

来说当然是不可能的。我尝试了各种对话，但没有成功。

Answer 1

您无法在 Web 视图中从 VS Code 访问任何 Web 内容或资源，除非您获取 VS Code API 时可用。

但是，使用相同的图像（不过没有动画）很容易，因为 VS Code 的所有小图标都使用 Codicon。

一个示例展示了如何在Web视图中使用Codicons。您必须安装 codicon 软件包：

npm i @vscode/codicons

从中获取 codicon CSS：

const codiconsUri = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'node_modules', '@vscode/codicons', 'dist', 'codicon.css'));

然后使用 HTML 元素（如 div 或 span）的 CSS 类来在其中显示 codicon 图标：

<div class="icon"><i class="codicon codicon-account"></i> account</div>