Docusaurus侧边栏无法添加SVG图标问题求助

• 核心原因：侧边栏分类的label字段默认不支持直接引用外部SVG图片链接，需要改用直接嵌入SVG代码或自定义组件的方式实现。

方法一：直接嵌入SVG代码到label #

将苹果SVG的代码直接写入label字段，示例配置如下：

items: [
  {
    type: 'category',
    // 嵌入SVG代码+文字，调整width/height适配侧边栏
    label: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20.94c-3.06.76-6.02.24-8-2-2-2.24-2.49-5.27-.2-7.57C5.56 8.32 8.62 7 12 7s6.44 1.32 8.2 4.37c2.29 2.3 1.8 5.33-.2 7.57-1.98 2.24 4.94 2.76 8 2z"/><path d="M12 20.94c3.06.76 6.02.24 8-2 2-2.24 2.49-5.27.2-7.57C18.44 8.32 15.38 7 12 7s-6.44 1.32-8.2 4.37c-2.29 2.3-1.8 5.33.2 7.57 1.98 2.24 4.94 2.76 8 2z"/><path d="M12 4v1"/></svg> iOS',
    link: { /* 你的链接配置 */ },
    items: [/* 子项列表 */]
  }
]

注意：若你的框架版本默认不解析label中的HTML，需开启对应HTML渲染权限。

方法二：自定义侧边栏分类组件 #

通过覆盖默认组件实现更灵活的图标控制：

1. 在项目目录下创建自定义组件文件 src/theme/SidebarItem/Category/index.js
2. 写入以下代码：

import React from 'react';
import OriginalCategoryItem from '@theme-original/SidebarItem/Category';

export default function CategoryItem(props) {
  const { item } = props;
  // 针对iOS分类添加图标
  if (item.label === 'iOS') {
    return (
      <OriginalCategoryItem
        {...props}
        label={
          <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M12 20.94c-3.06.76-6.02.24-8-2-2-2.24-2.49-5.27-.2-7.57C5.56 8.32 8.62 7 12 7s6.44 1.32 8.2 4.37c2.29 2.3 1.8 5.33-.2 7.57-1.98 2.24 4.94 2.76 8 2z"/>
              <path d="M12 20.94c3.06.76 6.02.24 8-2 2-2.24 2.49-5.27.2-7.57C18.44 8.32 15.38 7 12 7s-6.44 1.32-8.2 4.37c-2.29 2.3-1.8 5.33.2 7.57 1.98 2.24 4.94 2.76 8 2z"/>
              <path d="M12 4v1"/>
            </svg>
            {item.label}
          </span>
        }
      />
    );
  }
  return <OriginalCategoryItem {...props} />;
}

3. 重启项目服务，iOS分类即可显示苹果图标。

• 排查要点：
  • 外部SVG链接无效是因为侧边栏label不支持解析<img>标签，直接嵌入SVG代码更稳定。
  • 调整SVG的width和height属性，确保与侧边栏文字尺寸匹配。

内容的提问来源于stack exchange，提问作者Monica Manghnani