如何在Fluent UI中注册外部SVG作为图标？

Fluent UI的registerIcons方法要求图标必须是可直接渲染的React元素，<object>标签属于HTML嵌入标签，无法被该方法正确解析为图标组件，所以会失效。以下是几种可行的解决方案：

• 直接导入本地SVG为React组件
  借助打包工具（如Create React App自带的SVG支持、svg-loader），可以直接将SVG文件导入为React组件，再进行注册：

  import { ReactComponent as CustomIcon } from './your-icon-path.svg';
  
  registerIcons({
    icons: {
      'custom-icon': <CustomIcon />
    }
  });
  

• 内联SVG代码
  直接把SVG的完整代码写入注册逻辑，确保设置好width、height、viewBox等必要属性：

  registerIcons({
    icons: {
      'icon-name': (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" />
        </svg>
      )
    }
  });
  

• 加载外部SVG文件注册
  如果需要从外部地址加载SVG，可通过fetch获取内容后转换为React元素再注册：

  async function registerExternalIcon() {
    const res = await fetch('/external-icon.svg');
    const svgContent = await res.text();
    const ExternalSvg = () => (
      <svg dangerouslySetInnerHTML={{ __html: svgContent }} />
    );
    registerIcons({
      icons: {
        'external-icon': <ExternalSvg />
      }
    });
  }
  
  registerExternalIcon();
  

内容的提问来源于stack exchange，提问作者Mavi Domates