如何使用 styled-icons 输出故事书中的图标列表

Question

目前我正在手动添加图标，但对于几个图标来说，这种方式没有问题。但如果有 100 个图标，这就成了一个真正的问题。我怎样才能使这个可重复使用。所以我可以应用这个元素，这样它就可以是我想要的任何图标。最后它应该看起来像这样。

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

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

Answer 1

假设您将所有图标放入一个文件夹中，在本例中是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 = Object.values(Icons);
return (
     icons.map(IconComponent => <IconComponent width={60} bg={"black"} color={"white"} />)
}