时间戳

首页 > 解决方案 > 如何在反应应用程序中的 INavLink 中呈现自定义图标（不是 Office UI Fabric 图标）

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

问题描述

我正在使用来自 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。我的要求是在导航栏中呈现一些自定义图标。图标属性需要一个字符串，并且只能使用此处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)
          }

要求：需要在此处显示不属于列表的图标https://uifabricicons.azurewebsites.net/

标签： reactjsiconsoffice-ui-fabricoffice-ui-fabric-react

解决方案

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

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

推荐阅读