Icon

mk-icon renderiza um ícone do conjunto Lucide como SVG inline. O catálogo completo é distribuído com a biblioteca, sem requisição em runtime e sem dependência externa. O componente é puramente visual: não emite eventos, não recebe foco e não expõe nome acessível próprio.

Quando usar

Use mk-icon para qualquer ícone de interface: dentro de botões e campos, ao lado de rótulos, em itens de navegação e em indicadores de status.

Para um indicador de carregamento em rotação, use mk-spinner, que já é mk-icon mais rotação contínua. Para ilustrações maiores e decorativas, use mk-illustration-icon.

Padrão

name é a única prop obrigatória. O padrão de size é md e o de color é currentColor, que herda a cor de texto do elemento pai.

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

<MkIcon name="search" />

<mk-icon name="search"></mk-icon>

Tamanhos

size usa a escala semântica compartilhada com o resto do sistema. Cada valor mapeia para um token da escala de espaçamento, de --db1-spacing-3 a --db1-spacing-12.

<MkIcon name="settings" size="xs" />
<MkIcon name="settings" size="md" />
<MkIcon name="settings" size="xxl" />

<mk-icon name="settings" size="xs"></mk-icon>
<mk-icon name="settings" size="md"></mk-icon>
<mk-icon name="settings" size="xxl"></mk-icon>

Cor

A cor do traço é resolvida nesta ordem de precedência:

A prop color aceita qualquer valor de cor CSS. Prefira tokens da camada --icon-*, que são theme-aware.

<MkIcon name="circle-alert" color="var(--icon-error)" />

<mk-icon name="circle-alert" color="var(--icon-error)"></mk-icon>

Sobrescrever a cor com --mk-icon-color

--mk-icon-color tem precedência sobre a prop color. Um ancestral que declara a variável colore todos os mk-icon descendentes de uma vez, e a prop deixa de ter efeito. Abaixo os dois ícones declaram color="red", e a variável do container vence:

<div style={{ '--mk-icon-color': 'var(--icon-success)' }}>
  <MkIcon name="check" color="red" />
  <MkIcon name="circle-alert" color="red" />
</div>

<div style="--mk-icon-color: var(--icon-success)">
  <mk-icon name="check" color="red"></mk-icon>
  <mk-icon name="circle-alert" color="red"></mk-icon>
</div>

Propriedades customizadas atravessam fronteiras de shadow DOM, então a variável alcança um mk-icon renderizado dentro de outro componente, em qualquer profundidade. É por esse caminho que mk-button, mk-autocomplete, mk-search e mk-mentions colorem seus próprios ícones e spinners sem passar props — e é como recolorir um ícone que você não instancia diretamente:

/* recolore o ícone interno de um componente de terceiro nível */
mk-button.destructive {
  --mk-icon-color: var(--icon-error);
}

Sem nenhum --mk-icon-color no contexto, vale a prop color, cujo padrão currentColor herda a cor de texto do elemento pai.

Preenchimento

filled preenche o desenho com a cor atual. --mk-icon-fill tem precedência sobre a prop e também vale a partir de qualquer ancestral.

<MkIcon name="heart" size="lg" color="var(--icon-error)" filled />

<mk-icon name="heart" size="lg" color="var(--icon-error)" [filled]="true"></mk-icon>

Espessura do traço

strokeWidth ajusta a ênfase do desenho. Use valores menores para ícones decorativos e maiores quando o ícone precisa competir com texto em peso alto.

<MkIcon name="star" size="lg" strokeWidth={1.5} />

<mk-icon name="star" size="lg" [strokeWidth]="1.5"></mk-icon>

Props — mk-icon

CSS custom properties

Eventos

Não emite eventos. O componente é puramente visual e não responde a interação.

Acessibilidade

O <svg> interno é sempre aria-hidden="true". mk-icon é decorativo em todos os casos e nunca expõe nome acessível próprio — não há prop de rótulo.

Quando o ícone carrega significado, o nome acessível é responsabilidade de quem o envolve:

• Em um controle sem texto visível, declare o nome no elemento interativo — aria-label no button, ou a prop label de mk-icon-button.
• Ao lado de um texto que já descreve a ação, nada mais é necessário: o ícone reforça o rótulo e permanece fora da árvore de acessibilidade.
• Para um ícone de status sem texto adjacente, acompanhe-o de conteúdo visualmente oculto que descreva o estado.

Como elemento gráfico não textual, o ícone se enquadra no critério 1.4.11 (Non-text Contrast), que exige 3:1 contra o fundo adjacente. Os valores da camada --icon-* atendem esse limite nos dois temas.

A transição de 0.2s aplicada ao SVG é removida sob prefers-reduced-motion: reduce.

O componente não entra na ordem de tabulação e não expõe operações de teclado.