我一直在尝试将流畅的 ui 北极星中的图标添加到流畅的 ui 下拉列表中。没有可用的适当文档

Question

我尝试使用渲染项目添加分隔线和图标以流畅的用户界面下降，但图标不可见
即使默认值不显示图标，点击后下拉菜单也不显示

import * as React from "react";
import { Dropdown, DropdownItemProps, Flex, Text } from "@fluentui/react-northstar";
import { AcceptIcon, TeamsIcon } from "@fluentui/react-icons-northstar";

interface CustomDropdownItemProps extends DropdownItemProps {
  icon: React.ReactNode;
  key: string;
  kind?: "divider";
}

const items = [
  {
    key: "myMatters",
    header: "My matters",
    
    icon: <AcceptIcon />,
  },

  {
    kind: "divider" as const,
  },
  {
    key: "teamName1",
    header: "Team Name",
    
    icon: <TeamsIcon />,
  },
];

const renderItem = (item: any) => (
  <Flex gap="gap.smaller" vAlign="center">
    {item.icon}
    <Text content={item.header as string} />
  </Flex>
);

export const DropdownMenu: React.FC = () => (
  <Dropdown
    items={items}
    placeholder="Select an option"
    defaultValue={items[0]}
    checkable
    renderItem={renderItem}
    inline
  />
);

Answer 1

根据存储库文档判断，它不接受图标或组件作为其道具。

但是您可以提供图像字符串：

https:// Fluentsite.z22.web.core.windows.net/0.66.2/components/dropdown/props#dropdown-item

const items = [
  {
    key: "myMatters",
    header: "My matters",
    image: '../path/to/icon.png',
  }
];

因此，您可以从库中下载 svgs，或者尝试将它们转换为 Base64 字符串并传递。