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

Question

I was trying to use custom svg files in my nav bar but not able to render then. I'm using 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
      }
]}

I had tried using "registerIcons" from 'office-ui-fabric-react/lib/Styling' but it doesnt worked for me.

Please help me in this.

Answer 1

Property icon inside INavLink is reserved for FluentUI Icons. More info here.

If you want to render a custom Icon for specific menu item you need to use onRenderLink prop inside 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.