Icon

Icon wraps a Phosphor glyph and forces you to answer one question: does this icon mean something, or is it decoration? Getting that right is the difference between an accessible icon and a confusing one.

Usage

import { Icon } from "@sina-design-system/core";
import { ShieldCheck } from "@phosphor-icons/react";

<Icon icon={ShieldCheck} label="Governed by SINA" />   {/* announced */}
<Icon icon={ShieldCheck} decorative />                 {/* silent */}

Examples

Props

Accessibility

Provide exactly one of label or decorative. A meaningful icon without a label is invisible to screen-reader users; a decorative one with a label is noise. Color follows currentColor, so the surrounding text-* token drives it.