如何使用样式图标输出故事书中的图标列表

Posted 2023-03-15

【中文标题】如何使用样式图标输出故事书中的图标列表

【英文标题】：How to output a list of icons in storybook with styled-icons

【发布时间】：2021-04-13 10:57:35

【问题描述】：

目前我正在手动添加图标，但是对于几个图标，这种方式没有问题。但是如果有 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>
  );
;

【参考方案1】：

假设您要将所有图标放在一个文件夹中，在本例中为boxicons-logos，将所有图标放在一个文件夹boxicons-logos 中，并为每个图标创建一个单独的文件，例如FaceBookIcon 创建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" />)