Ícones

A biblioteca traz 1.806 ícones do Figma (Material Icons), um componente React por ícone. Eles herdam a cor do texto (currentColor) e o bundler remove os que você não importa.

Como importar

Importe pelo nome do componente em @handsondigital/idplugger-ui/icons (o nome do Figma em snake_case vira Icon + PascalCase: check_box → IconCheckBox).

import { IconCheck } from '@handsondigital/idplugger-ui/icons'

export function Exemplo() {
  return <IconCheck />
}

const Default = () => <IconCheck size={24} />;

Tamanhos

size aceita número (px) ou unidade CSS. O padrão é 24.

const Sizes = () => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
    <IconCheck size={16} />
    <IconCheck size={20} />
    <IconCheck size={24} />
    <IconCheck size="2rem" />
  </div>
);

Decorativo ou acessível

Sem title, aria-label ou aria-labelledby o ícone é decorativo (aria-hidden). Com title ele vira role="img" com nome acessível: use quando o ícone transmite informação sozinho.

const AccessibleVsDecorative = () => (
  <p style={{ display: 'flex', alignItems: 'center', gap: 8, margin: 0 }}>
    <IconStar title="Favorito" />
    <IconCheck />
    <span>Participação confirmada</span>
  </p>
);

Galeria

Pesquise pelo nome do Figma e filtre por categoria. O nome exibido é o que você importa.