如何自定义Storybook UI？替换默认图标为自定义图标（HTML 6.5.16）

完全可以替换Storybook的默认图标，包括你提到的“预订（bookmark）”这类图标，无需额外插件，通过自定义主题即可实现。以下是具体操作步骤：

• 配置自定义主题文件
  在项目的.storybook/manager.js中编写主题配置（这个文件负责控制Storybook的UI层，而非预览区内容）。

• 定义自定义图标组件
  把你的自定义图标转为React组件（Storybook UI基于React构建，所以需要这种格式），可以用@storybook/components提供的Icon组件包裹SVG内容，确保尺寸适配。

• 覆盖主题中的默认图标
  在主题配置的icons字段中，用自定义组件替换对应key的默认图标。

示例代码：

import { create } from '@storybook/theming';
import { Icon } from '@storybook/components';

// 自定义预订图标组件
const CustomBookmarkIcon = () => (
  <Icon>
    <svg viewBox="0 0 24 24" fill="currentColor">
      {/* 替换为你的自定义SVG路径 */}
      <path d="M19 21l-7-3-7 3V5c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2v16z"/>
    </svg>
  </Icon>
);

// 创建自定义主题
const customTheme = create({
  base: 'light', // 可选'dark'，基于基础主题扩展
  icons: {
    bookmark: CustomBookmarkIcon, // 替换默认预订图标
    // 可继续添加其他图标替换，比如menu、search、close等
    // menu: CustomMenuIcon,
  },
});

// 应用主题
export const parameters = {
  options: {
    theme: customTheme,
  },
  docs: {
    theme: customTheme,
  },
};

• 注意事项
  1. 若不知道要替换的图标对应的key，可以打开Storybook的开发者工具，查看目标图标元素的data-icon属性值，即为对应的key。
  2. SVG图标需设置viewBox属性，并确保fill="currentColor"，这样能继承Storybook主题的颜色样式。
  3. 此方法适用于Storybook 6.x版本，包括你使用的6.5.16，与HTML类型的故事内容无冲突。

内容的提问来源于stack exchange，提问作者Riccardo Dell'Omo