How to output a list of icons in storybook with styled-icons

Question

Currently I am adding icons manually, but for a couple of icons this way is not problematic. But in case of 100 icons it becomes a really problem. How can I make this reusable. So I can apply this element so it can be any icon I want. In the end it should look like this for instance.

<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>
  );
};

score 5 · Answer 1 · edited Dec 12 '22 at 03:38

Assuming you will be putting all the icons in one folder, in this case it is boxicons-logos, put all the icons into that folder and create an individual file for each icon.

E.g: for FaceBookIcon create FaceBookIcon.jsx, for InstagramIcon create InstagramIcon.jsx etc.

Once you put all the icons in the boxicons-logos folder, create an index.js file inside it and export all the icons:

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

Once done, inside the storybook file, where you want to import 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"} />)
}

How to output a list of icons in storybook with styled-icons

1 Answers1