Storybook dynamic auto-generated icon gallery

Icons.mdx.txt

import { IconGallery, IconItem, Meta } from "@storybook/blocks";
import React from "react";

export const icons = import.meta.glob("../shared/icons/*.tsx", { eager: true });

<Meta title="Documentation/Icons" />

# Icons

<IconGallery>
  {
    Object.values(icons).map((module) => {
      const [iconName, IconComponent] = Object.entries(module)[0];
      return (
        <IconItem name={iconName}>
          <IconComponent />
        </IconItem>
      );
    })
  }
</IconGallery>