reactjs React vscode-webview-ui-toolkit按钮未显示图标

jm2pwxwz 于 2023-11-18 发布在 React

关注(0)|答案(1)|浏览(97)

我正在使用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-to-onchange-toolkit）。
我按照文档的另一部分添加了一个图标（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>

字符串
但是图标没有显示。如何将图标添加到按钮？

reactjs

来源：https://stackoverflow.com/questions/77204002/react-vscode-webview-ui-toolkit-button-not-showing-icon

1条答案

按热度按时间

brc7rcf01#

您的代码和Toolkit文档提供的示例使用某些CSS类来设置图标的样式。在您的示例中，如果找不到类codicon和codicon-save，则它将无法按预期工作。
首先，你需要正确安装Codicons package。确保你是专门为React应用安装的，而不是扩展的根目录（假设你的扩展是基于Webview UI Toolkit React sample的，这将是在webview-ui级别）。
然后，与Microsoft提供的webview Codicons sample一样，您必须在webview提供程序的HTML内容中包含样式表<link>，如下所示（注意，这是使用已弃用的vscode-codicons，但您将需要@vscode/codicons）。（在主扩展src中，而不是webview-ui React应用）：

import { 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: Unauthorized错误：

import { 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"),
  ],
};

型

赞(0）回复(0）举报 2023-11-18

我来回答

reactjs React vscode-webview-ui-toolkit按钮未显示图标

1条答案

相关问题

热门标签

最新问答