How to import and show all the components from a npm package

I was working on an npm package with React Components, and this is just a short note to self on how to import all the components from the package and list them.

import * as Icons from '@name/package-name';

export const IconDisplay = () => (
  <ul>
    {Object.entries(Icons).map(([iconName, IconComponent]) => (
      <IconItem key={iconName} name={iconName} Component={IconComponent} />
    ))}
  </ul>
);

interface IconItemProps {
  name: string;
  Component: React.ComponentType;
}

const IconItem = ({ name, Component }: IconItemProps) => (
  <li>
    <Component aria-hidden="true" />
    <p>{name}</p>
  </li>
);

Now, use it like this

import { IconDisplay } from '@compoents/IconDisplay';

<IconDisplay />