将自定义 SVG 图标添加到 Fluent UI 命令栏项目

Question

我有多个命令栏项目需要自定义 SVG 图标，但无论我做什么，我都无法让这些图标为我的生活服务。

这是我注册为图标的 SVG：

registerIcons({
    icons: {
        'Assigned-svg': (
            <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.9995 32">
                <path class="cls-1" d="M25.9995,8.5781v23.4219H0V0h17.4214l8.5781,8.5781ZM23.9995,30V10h-8V2H2v28h21.9995ZM4,4h2v2h-2v-2ZM4,8h2v2h-2v-2ZM4,12h2v2h-2v-2ZM20.9995,14h1v14h-2v-4h-6.5776l-4,4h-2.4219l13.9995-14ZM19.9995,17.4219l-4.5781,4.5781h4.5781v-4.5781ZM17.9995,8h4.5781l-4.5781-4.5781v4.5781Z" />
            </svg>
        )
    }
}); 

这是命令栏项目，第一项是图标应该所在的位置：

    const _items: ICommandBarItemProps[] = [
        {
          key: 'assigned',
          text: 'Assigned',
          cacheKey: 'myCacheKey', 
          //iconProps: { iconName: 'Assign' },
          iconProps: {iconName: 'AssignedIcon'},
         
          className: filterType == 'assigned'? 'selectedView': '',
          onClick: () => handleFilterChange('assigned')
        },
        {
          key: 'overdue',
          text: 'Overdue',
          iconProps: { iconName: 'EventInfo' },
          className: filterType == 'overdue'? 'selectedView': '',
          onClick: () => handleFilterChange('overdue')
        },
        {
          key: 'submitted',
          text: 'Submitted',
          iconProps: { iconName: 'Share' },
          className: filterType == 'submitted'? 'selectedView': '',
          onClick: () => handleFilterChange('submitted')
        },
        {
          key: 'reviewed',
          text: 'Reviewed',
          iconProps: { iconName: 'ReviewSolid' },
          className: filterType == 'reviewed'? 'selectedView': '',
          onClick: () => handleFilterChange('reviewed')
        },{
          key: 'all',
          text: 'All',
          iconProps: { iconName: 'ViewAll' },
          className: filterType == 'all'? 'selectedView': '',
          onClick: () => handleFilterChange('all')
        }
      ];

有趣的是，该图标在作为 FontIcon 加载时工作正常，但不能作为命令栏项目的图标工作：

return (
   <>
   <FontIcon
      iconName="Assigned-svg"
      aria-hidden={undefined}
      className={mergeStyles(iconClass, {
        width: 50,
        height: 50,
     
      })}
    />
    <AssignedIcon>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.9995 32">
          <path d="M25.9995,8.5781v23.4219H0V0h17.4214l8.5781,8.5781ZM23.9995,30V10h-8V2H2v28h21.9995ZM4,4h2v2h-2v-2ZM4,8h2v2h-2v-2ZM4,12h2v2h-2v-2ZM20.9995,14h1v14h-2v-4h-6.5776l-4,4h-2.4219l13.9995-14ZM19.9995,17.4219l-4.5781,4.5781h4.5781v-4.5781ZM17.9995,8h4.5781l-4.5781-4.5781v4.5781Z" />
        </svg>
      </AssignedIcon>
      <CommandBar
        items={_items}
        ariaLabel="Inbox actions"
        styles={{root: {backgroundColor: ''}}}
     
      />   
      </>
  );

我尝试手动添加 SVG 并将其作为字符串添加到项目的 iconProps 中，但没有任何效果。

请帮忙。

Answer 1

我找到了一种方法来做到这一点，onRenderIcon 函数可以工作，但只有当 iconProps 提供了流畅的 UI 注册图标名称时它才有效。

因此，首先为 iconProps 提供 Fluent UI 默认包含的 iconName，然后使用 onRenderIcon 方法并通过 img 标签提供图像或接受 SVG 的 FontIcon/DefaultIcon/IconButton 组件。

const _items: ICommandBarItemProps[] = [
    {
      key: 'assigned',
      text: 'Assigned',
      //cacheKey: 'myCacheKey', 
      iconProps: { iconName: 'Assign' },
      onRenderIcon: () => (<img style={{ height: "20px", width: "20px" }} src={AssignmentIcons.Assigned} />),
      className: filterType == 'assigned' ? 'selectedView' : '',
      onClick: () => handleFilterChange('assigned')
    },

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>