0

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

4

1 回答 1

1

假设您将所有图标放在一个文件夹中，在这种情况下boxicons-logos，将所有图标放在一个文件夹中 boxicons-logos，并为每个图标创建一个单独的文件，例如 FaceBookIcon createFaceBookIcon.jsx和 InstagramIcon create 类似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"} />)
}
于 2021-01-14T10:44:50.177 回答