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

Question

我试图在导航栏中使用自定义 svg 文件，但当时无法渲染。我正在使用流利的反应

              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里面的属性INavLink是为FluentUI Icons保留的。更多信息在这里。

如果要为特定菜单项呈现自定义图标，则需要在onRenderLink内部使用 prop 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 工作示例。

FluentUI 文档。