如何在反应应用程序的 INavLink 中呈现自定义图标（不是 Office UI Fabric 图标）

Question

我正在使用来自 office-ui-fabric-react 的 Nav，并使用此处 https://docs.microsoft.com/en-us/javascript/api/office-ui-fabric-react/inavlink?view=office-ui-fabric-react-latest#icon. My requirement is to render some custom icon in the Nav bar. The icon property expects a string and am only able to use the icons from here https://uifabricicons.azurewebsites.net/ 带有友好名称的图标呈现导航栏，

          //Doesn't render icon
          {
            name: "App details",
            url: "http://msn.com",
            key: "key1",
            target: "_blank"
            icon : "SomeURL"(Some custom icon from the project)
          }

          //renders icon
          {
            name: "App details",
            url: "http://msn.com",
            key: "key1",
            target: "_blank"
            icon : "Documentation"(Any Friendly Name from above list of icons)
          }

Requirement : 需要显示一个不属于列表的图标 https://uifabricicons.azurewebsites.net/

Answer 1

您可以尝试使用 onRenderLink 方法自定义 link 的外观

https://developer.microsoft.com/en-us/fluentui#/controls/web/nav