DOCS · 05 / 07

TypeScript

Use the IconProps type and pass icons around as props.

Types are included

You don't need to install anything extra. Your editor will autocomplete icon names and props as soon as the package is installed.

The IconProps type

IconProps describes every prop an icon accepts. Import it as a type.

TYPE IMPORT

import type { IconProps } from "mochi-icons";

Pass an icon as a prop

A common pattern is a component that takes any icon. Type the prop as ComponentType<IconProps>.

MENU-ITEM.TSX

import type { ComponentType } from "react";
import type { IconProps } from "mochi-icons";

type MenuItemProps = {
  icon: ComponentType<IconProps>;
  label: string;
};

export function MenuItem({ icon: Icon, label }: MenuItemProps) {
  return (
    <li>
      <Icon size={20} />
      {label}
    </li>
  );
}

USING IT

import { BellIcon } from "mochi-icons/BellIcon";

<MenuItem icon={BellIcon} label="Notifications" />

Wrap an icon with your own defaults

SMALL-ICON.TSX

import type { ComponentType } from "react";
import type { IconProps } from "mochi-icons";

export function SmallIcon({
  icon: Icon,
  ...props
}: IconProps & { icon: ComponentType<IconProps> }) {
  return <Icon size={16} {...props} />;
}

Types for the icon list

If you build your own icon picker, the list of icons has its own types.

METADATA

import { iconMetadata, type IconMetadataEntry } from "mochi-icons/metadata";

const names = iconMetadata.icons.map((icon: IconMetadataEntry) => icon.name);