如何在 Fluent UI React 的 NavItems 中使用本地 svg 文件

问题描述

我试图在我的导航栏中使用自定义 svg 文件，但当时无法渲染。我正在使用 fluentui-react

              onLinkClick={onLinkClick}
              className="menuLinks"
              selectedKey={'quickStart'}
              ariaLabel="Nav bar"
              styles={navStyles}
              groups={navLinkGroups}
            />
................................
export const navLinkGroups: INavLinkGroup[] = [
  {
    links: [
      {
        name: 'Home',url: '',key: 'home',desc: 'Home',icon: '' //--> need to render custom icon here
      }
]}

我曾尝试使用“office-ui-fabric-react/lib/Styling”中的“registerIcons”，但它对我不起作用。

请帮我解决这个问题。

解决方法

icon 内的属性 INavLink 保留用于 FluentUI 图标。更多信息here。

如果您想为特定菜单项呈现自定义图标，您需要在 onRenderLink 中使用 Nav component 属性：

const renderCustomMenuItem = (props,defaultRender) => {
    // Set custom icon for documents menu item.
    if(props.name === 'Documents') {
      return (
        <div>
          <img src={mySVGIcon} />
          <span>{props.name}</span>
        </div>
      )
    } else {
      return defaultRender(props);
    }
}

<Nav
  ...
  onRenderLink={renderCustomMenuItem}
/>

Codepen working example.

FluentUI Documentation.