我正在使用 React 开发 vscode 的扩展，并使用 WebUi Toolkit 库 (https://github.com/microsoft/vscode-webview-ui-toolkit) 作为组件。我想在我的按钮上添加一个“保存”图标。
我已按照文档在 React 中添加按钮（https://github.com/microsoft/vscode-webview-ui-toolkit/tree/main/src/react#use-oninput-instead-of-onchange-处理击键）。
我按照文档的其他部分添加了一个图标（https://github.com/microsoft/vscode-webview-ui-toolkit/blob/main/src/button/README.md#start-icon ).
我还在 codicons 网站上查找了保存图标（https://microsoft.github.io/vscode-codicons/dist/codicon.html）。
所以生成的代码是：
import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
<VSCodeButton >
Save
<span slot="start" className="codicon codicon-save"></span>
</VSCodeButton>
但是图标没有显示。 如何给按钮添加图标？
您的代码和 Toolkit 文档提供的示例使用某些 CSS 类来设置图标样式。在您的情况下，如果未找到类
codiconcodicon-save首先，您需要正确安装 Codicons 包。确保您专门为 React 应用程序安装它，而不是扩展的根目录（假设您的扩展基于 Webview UI Toolkit React 示例，这将位于
webview-ui然后，就像在 Microsoft 提供的 webview Codicons 示例中一样，您必须在 Webview 提供程序的 HTML 内容中包含样式表
<link>vscode-codicons@vscode/codiconssrcwebview-uiimport { Uri } as vscode from "vscode";
private _getWebviewContent(webview: Webview, extensionUri: Uri) {
const codiconsUri = webview.asWebviewUri(
Uri.joinPath(
extensionUri,
`webview-ui`,
'node_modules',
'@vscode',
'codicons',
'dist',
'codicon.css',
)
);
return `
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="${codiconsUri}">
</head>
<body>
<div id="root"></div>
</body>
</html>
`;
}
这样，React 应用程序将能够访问必要的 CSS 类，以便使用您提供的代码正确渲染所需的图标。
您还需要将同一目录添加到 webview 选项中允许的本地资源中，否则您在尝试检索样式表时可能会遇到
401: Unauthorizedimport { Uri } as vscode from "vscode";
this._webviewView.webview.options = {
enableScripts: true,
localResourceRoots: [
Uri.joinPath(this._extensionUri, "out"),
Uri.joinPath(this._extensionUri, "webview-ui/build"),
// Must explicitly allow webview access to that style sheet
Uri.joinPath(this._extensionUri, "webview-ui/node_modules/@vscode/codicons/dist"),
],
};