如何通过从路径读取 SVG 文件来注册自定义图标？

Question

我正在构建一个使用 @fluentui/react (version 8.34.7) 的应用程序，我正在使用 create-react-app。

我想做的一件事是注册 SVG 格式的自定义图标。按照示例 here，我想出了以下代码：

registerIcons({
    icons: {
        'hamburger-icon': (
            <svg viewBox="0 0 16 16" role="presentation" focusable="false" aria-hidden="true">
                <g>
                    <path d="M1 4.5v-1h14v1zm0 4v-1h14v1zm0 4v-1h14v1z"></path>
                </g>
            </svg>                
        )
    }
});

这完全没问题。我可以在我的代码中引用 hamburger-icon 并显示图标。

但是，上面代码的问题是我必须在我的代码中包含 svg 文件内容。我想做的是读取 SVG 文件内容，然后在 registerIcons 方法中使用它。我不确定我该怎么做。

如果我这样做：

import Hamburger from 'assets/images/hamburger.svg';

我得到一个URL。

如果我这样做：

import {ReactComponent as HamburgerIcon} from 'assets/images/hamburger.svg';

我得到一个 React 组件，而 registerIcon 方法需要一个 React 元素。

是否可以简单地指定 SVG 文件的文件路径并从中注册图标？

Answer 1

好吧，这太简单了！我所要做的就是：

import {ReactComponent as HamburgerIcon} from 'assets/images/hamburger.svg';

registerIcons({
    icons: {
        'hamburger-icon': React.createElement(HamburgerIcon)
    }
});

一切正常。