Illustration Icon

Ícone dentro de um container com fundo tonal, usado em empty states, cards de destaque, onboarding e listagens para reforçar o significado semântico de uma cor.

O mk-illustration-icon exibe um ícone dentro de um container com fundo tonal — o padrão usado em empty states, cards de destaque, onboarding, notificações e listagens. O componente resolve sozinho o background, o padding e o border-radius via tokens de componente dedicados, inclusive em dark mode. É puramente decorativo: não é focável e não emite eventos.

Padrão

Defina icon com o nome de um ícone Lucide. Por padrão, usa color="brand", shape="rounded" e size="md".

import { MkIllustrationIcon } from '@db1/makuco-ui-react';

<MkIllustrationIcon icon="sparkles" />

<mk-illustration-icon icon="sparkles"></mk-illustration-icon>

Tamanhos

Cinco tamanhos disponíveis, idênticos aos de mk-icon: xs, sm, md (padrão), lg e xl.

<MkIllustrationIcon icon="sparkles" size="lg" />

<mk-illustration-icon icon="sparkles" size="lg"></mk-illustration-icon>

Formas

A prop shape alterna entre rounded (padrão) e circle. A forma altera apenas o border-radius — o padding permanece igual entre as duas no mesmo size.

<MkIllustrationIcon icon="sparkles" shape="circle" />

<mk-illustration-icon icon="sparkles" shape="circle"></mk-illustration-icon>

Cores

Doze cores semânticas: gray, brand (padrão), pink, orange, teal, cyan, purple, violet, error, success, info e warning.

<MkIllustrationIcon icon="sparkles" color="error" />
<MkIllustrationIcon icon="sparkles" color="success" />

<mk-illustration-icon icon="sparkles" color="error"></mk-illustration-icon>
<mk-illustration-icon icon="sparkles" color="success"></mk-illustration-icon>

Props

Prop	Tipo	Padrão	Descrição
`icon`	`IconName`	—	Nome do ícone Lucide, repassado diretamente à prop `name` do `mk-icon` interno.
`color`	`"gray" \| "brand" \| "pink" \| "orange" \| "teal" \| "cyan" \| "purple" \| "violet" \| "error" \| "success" \| "info" \| "warning"`	`"brand"`	Cor semântica do container e do ícone.
`shape`	`"rounded" \| "circle"`	`"rounded"`	Forma do container — cantos arredondados ou totalmente circular.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Escala visual, idêntica a `IconSize` de `mk-icon`. Repassada ao `mk-icon` interno e usada para calcular padding/radius do container.

Acessibilidade

O host recebe aria-hidden="true" sempre — o componente é puramente decorativo e não é anunciado por leitores de tela.
Não é focável e não participa da ordem de tabulação.
Quando o significado semântico da cor (ex.: erro, sucesso) não é redundante com texto visível ao lado, forneça o rótulo acessível no contexto de uso — o componente em si não assume esse papel.
O contraste ícone/background é garantido pelos pares de tokens --illustration-subtle-bg-{color} / --illustration-subtle-icon-{color} (≥ 3:1) em ambos os temas.