如何输出的故事书的图标，样式，图标的列表

如何解决如何输出的故事书的图标，样式，图标的列表

手动目前我加入图标，但一对夫妇的图标，这样是没有问题的。但在100项的图标情况下，它成为一个真正的问题。我怎样才能让这种可重复使用的。所以，我可以将此元素，因此它可以是我想要的任何图标。到底应该是这样的，例如

<Icon icon='login' color="yellow" mr="10px" fontSize="20px" />

// styled components
import { Facebook } from "@styled-icons/Boxicons-logos/Facebook";
import { Instagram } from "@styled-icons/Boxicons-logos/Instagram";

export const FaceBookIcon = styled(Facebook)`
    ${typography} 
    ${space}
    ${layout}
    ${color}
`;

export const InstagramIcon = styled(Instagram)`
    ${typography} 
    ${space}
    ${layout}
    ${color}
`;

// icons.tsx
import React from "react";
import { FaceBookIcon,InstagramIcon } from "./icon.styles";

export interface IconProps {
  width?: number;
  bg?: string;
  color?: string;
}

export const Icon: React.FC<IconProps> = ({
  width,bg,color,...props
}) => {
  return (
    <div>
      <FaceBookIcon width={60} bg={"black"} color={"white"}/>
      <InstagramIcon width={60}  bg={"black"} color={"white"}/>
    </div>
  );
};

解决方法

假设您将所有图标放在一个文件夹中，在这种情况下它是 boxicons-logos，将所有图标放在一个文件夹 boxicons-logos 中，并为每个图标创建一个单独的文件，例如 FaceBookIcon create FaceBookIcon.jsx 和类似的 InstagramIcon 创建 InstagramIcon.jsx，一旦您将所有图标放在 boxicons-logos 文件夹中在其中创建一个 index.js 文件，导出所有图标

// inside the index.js file
export {default as FacebookIcon } from './FacebookIcon'
export {default as InstagramIcon } from './InstagramIcon'
// for all the icons

完成后，在故事书文件中，您要在其中导入所有图标

//boxicons-logos is path to folder which contains all icons
import * as Icons from './boxicons-logos'

const AllIcons = () => {
const icons = Objet.values(Icons);
return (
     icons.map(IconComponent => <IconComponent width={60} bg={"black"} color={"white"} />)
}