如何在@fluentui/react v8中通过读取本地SVG文件路径注册自定义图标

AI 小北

2026-9-30

@fluentui/react 本地SVG自定义图标注册方案

不支持直接传入SVG文件路径完成注册，可通过以下两种方式实现本地SVG文件的图标注册：

方案1：单图标直接注册

你通过import {ReactComponent as 图标组件名} from 'svg文件路径'语法得到的是React组件，只需将其实例化为React元素后传入registerIcons即可，示例代码如下：

import { registerIcons } from '@fluentui/react';
// 导入本地SVG的React组件
import { ReactComponent as HamburgerIcon } from 'assets/images/hamburger.svg';

registerIcons({
    icons: {
        // 直接实例化组件传入，可补充FluentUI要求的无障碍属性
        'hamburger-icon': <HamburgerIcon role="presentation" focusable={false} aria-hidden="true" />
    }
});

如果你的SVG文件本身已经配置了正确的`viewBox`属性，注册后的使用方式和内嵌SVG的用法完全一致。

方案2：多图标批量注册

如果有大量自定义图标需要统一注册，可以用require.context批量读取目录下的SVG文件自动处理：

import { registerIcons } from '@fluentui/react';

// 批量读取assets/icons目录下所有后缀为.svg的文件
const svgContext = require.context('assets/icons/', false, /\.svg$/);
const iconMap = {};

svgContext.keys().forEach(filePath => {
    // 提取文件名作为注册的图标名
    const iconName = filePath.replace(/^\.\/(.*)\.svg$/, '$1');
    // 获取SVG对应的React组件并实例化
    const Icon = svgContext(filePath).ReactComponent;
    iconMap[iconName] = <Icon role="presentation" focusable={false} aria-hidden="true" />;
});

// 批量注册所有图标
registerIcons({
    icons: iconMap
});