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

Question

我试图在我的导航栏中使用自定义 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”，但它对我不起作用。

请帮帮我。

Answer 1

属性 icon inside INavLink 保留给 FluentUI Icons。更多信息 here.

如果您想为特定菜单项呈现 自定义图标，您需要在 Nav component:

中使用 onRenderLink 道具

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.

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

How to use local svg files in NavItems in Fluent UI React

fluent-ui

fluentui-react