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

【问题标题】：How to use local svg files in NavItems in Fluent UI React如何在 Fluent UI React 的 NavItems 中使用本地 svg 文件
【发布时间】：2021-04-08 11:01:18
【问题描述】：

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

请帮帮我。

【问题讨论】：

标签： fluent-ui fluentui-react

【解决方案1】：

INavLink 内的属性 icon 保留给 FluentUI 图标。更多信息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.

【讨论】：