Beansv0.8.0

Icons

Beans uses Phosphor icons as an external dependency, so the icon set can change without a Beans release. The Icon component wraps them: it sizes them from a token, lets them inherit the text color, and hides decorative ones from screen readers.

icon.tsx
import { HouseSimpleIcon } from "@phosphor-icons/react";
import { Icon } from "@beans/ui";

<Icon icon={HouseSimpleIcon} />                 {/* decorative */}
<Icon icon={HouseSimpleIcon} label="Home" />     {/* meaningful */}
<Icon icon={HouseSimpleIcon} weight="duotone" />