@manyone-mds/icons

MDS icon library — per-icon code-split chunks with a lazy registry, as React components.

Lazy-loaded SVG icons for MDS. Each icon is its own chunk so consumers only pay for icons they actually render.

Install

npm install @manyone-mds/icons

react >=18 is a peer dependency.

Usage

This package exposes the lazy icon registry (a Record<string, LazyExoticComponent>) and the MDSIconName / MDSIconProps types. The user-facing icon component lives in @manyone-mds/components as MDSIcon, which reads from this registry:

import { MDSIcon } from "@manyone-mds/components";

<MDSIcon name="airplane" size={24} />

To use the registry directly:

import { Suspense } from "react";
import { iconRegistry, type MDSIconName } from "@manyone-mds/icons";

const name: MDSIconName = "airplane";
const LazyIcon = iconRegistry[name];

<Suspense fallback={null}>
  <LazyIcon />
</Suspense>

More

Full design system docs and source: github.com/damian-888/MDS-v1.0.0.

License

MIT