@trismegisto/icons

Catálogo de ícones do Hermes: desenhos de traço na grade 24×24 (traço ICON_STROKE_WIDTH = 1,75), pintados com currentColor, guardados como dados (não como componentes). Sem framework.

Na cadeia de camadas (tokens ← icons ← primitives ← core ← angular ← maps · charts · spine) é a segunda, logo depois dos tokens. O @trismegisto/primitives reexporta tudo deste pacote; o @trismegisto/angular desenha os ícones com <hm-icon>.

Instalação

npm install @trismegisto/icons

Sem dependências. Num app Angular ele vem junto dos outros quatro pacotes base (ver @trismegisto/angular), sempre na mesma versão.

Pontos de entrada

| Import | Conteúdo | | --- | --- | | @trismegisto/icons | Tipos (HermesIcon, IconBadge, HermesIconDirection) e as funções de registro e desenho: registerIcons, loadIcons, lookupIcon, listRegisteredIcons, onIconsRegistered, resolveIcon, renderIconSvg, iconMarkup, svgAttributes, solidBody; direções em ICON_DIRECTIONS/ICON_DIRECTION_BASES. Nenhum desenho. | | @trismegisto/icons/catalog | Os dados: HERMES_ICONS (o catálogo inteiro, ~870 ícones) e um export nomeado por ícone, em camelCase (addText → shape="add-text"). |

Os dados ficam fora da entrada principal de propósito: quem importa só as funções não leva o catálogo.

Registrar é obrigatório

Nenhum ícone vem registrado de graça. Um nome não registrado não quebra: desenha um ícone genérico (três traços) e, em desenvolvimento, avisa uma vez no console com o prefixo [hermes-icons].

No Angular, use os providers do @trismegisto/angular:

import { provideHermesIconLoader, provideHermesIcons } from '@trismegisto/angular';

// Catálogo inteiro num chunk à parte, baixado logo depois do bootstrap (recomendado):
provideHermesIconLoader(() => import('@trismegisto/icons/catalog').then((m) => m.HERMES_ICONS));

// Ou só os ícones que o app usa, no bundle inicial (tree-shakable):
import { bell, heart } from '@trismegisto/icons/catalog';
provideHermesIcons([bell, heart]);

Os ícones que os componentes do @trismegisto/angular usam por dentro (fechar, setas, alertas…) já são registrados por cada componente. O app registra só os que ele mesmo passa em shape/icon. Registrar o mesmo ícone duas vezes é inofensivo.

Sem framework, a mesma coisa direto:

import { loadIcons, renderIconSvg } from '@trismegisto/icons';

await loadIcons(() => import('@trismegisto/icons/catalog').then((m) => m.HERMES_ICONS));
element.innerHTML = renderIconSvg('bell', { badge: 'warning' });

Variantes e direção

• solid preenche as formas fechadas do desenho nos ícones que têm solid: true.
• badge acrescenta um ponto (ou, com 'warning-triangle', um triângulo) a qualquer ícone: true/'inherit', 'info', 'success', 'warning', 'danger'.
• Direção: arrow, angle e angle-double têm um desenho só; direction (left/right/up/down) gira o desenho. Os nomes por direção (arrow-left, angle-down, chevron-right…) resolvem para o desenho-base girado.

Não procure x-solid, x-fill ou x-mini: variante não é ícone. Nomes antigos desse tipo existem só como aliases do ícone-base.

<hm-icon shape="heart" size="lg" [solid]="true" status="danger" />
<hm-icon shape="bell" badge="warning" label="Notificações" />

Onde ver os ícones

Página Ícones do site de documentação (docs/website, rota /icons): busca por nome, filtro por categoria e o detalhe de cada ícone. Regras do catálogo: CLAUDE.md §4; visão geral em docs/architecture.

Desenvolvimento do pacote

Fonte em src/glyphs.ts (um export por ícone + GLYPH_ICONS). npm run build compila para dist/.