问题描述
手动目前我加入图标,但一对夫妇的图标,这样是没有问题的。但在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"} />)
}