如何更改 Storybook 中的图标

Question

我正在尝试将 Storybook 实现到我的项目中，但我似乎不知道如何更改 Favicon。我使用的是8.2.9版本，在网上找不到任何相关信息。我没有 manager-head.html 文件，我尝试过类似的事情

在我的 manager.ts 文件中

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('link[rel="shortcut icon"]')?.setAttribute('href', favicon);
});

还有我的 main.ts 文件中的内容

config.plugins?.push(
      new HtmlWebpackPlugin({
        title: 'Title',
        favicon: './public/favicon.png', 
      })
    );

有人知道该怎么做吗？

Answer 1

您可以尝试在Storybook配置目录（通常是.storybook/）中创建一个manager-head.html，并添加以下内容：

<link rel="shortcut icon" href="/path-to-your-favicon/favicon.png" 
    type="image/png">

另一种方式：使用manager.ts/manager.js：

const link = document.createElement('link');
link.rel = 'shortcut icon';
link.href = '/path-to-your-favicon/favicon.png';
document.head.appendChild(link);