trdr-icons

Catálogo de ícones da TRDR: 125 ícones curados em 10 categorias, extraídos do Material Symbols Outlined (peso 400, fill 0) e embutidos como SVG inline. Sem webfont, sem requisição de rede, sem nó de texto solto no DOM (o defeito clássico da webfont por ligature, que manda o nome do glyph para leitor de tela e extração de texto da página).

A curadoria não nasceu aqui: veio do trdr-site, primeiro projeto a trocar a webfont por SVG gerado. Este pacote existe para a curadoria e o componente pararem de viver duplicados entre projetos e virarem versão, como os tokens e a marca.

Instalação

npm i trdr-icons

import { Icon } from "trdr-icons"

<Icon name="candlestick_chart" size={20} />

O que o pacote exporta

| Export | O que é | |---|---| | Icon | componente React. Props: name (IconName), size ("1em" por padrão), className e o restante de SVGProps<SVGSVGElement> | | IconName | união literal com os 125 nomes curados, derivada do artefato gerado | | ICON_CATEGORIES | as 10 categorias (key, label, icons), para quem monta um seletor | | CURATED_ICON_NAMES | lista achatada e deduplicada de todo nome curado | | isCuratedIconName | type guard, para validar valor vindo de fora do sistema (ex: campo salvo em banco) | | ICONS / ICON_VIEWBOX | mapa nome → path e o viewBox comum, para uso avançado fora do componente Icon |

Como o pacote é montado

A fonte dos glyphs é o pacote @material-symbols/svg-400 (devDependency, nunca vai para produção). scripts/generate-icons.mjs lê src/icon-set.json (a curadoria: categorias + nomes), busca o <path> de cada nome no pacote de origem, e escreve src/generated-icons.ts com o tipo IconName e o mapa ICONS. Dois nomes do catálogo oficial do Material Symbols não são empacotados como arquivo próprio pelo mirror (expand_more, new_releases): o gerador traz o path deles à mão, no mapa MISSING_ICON_FALLBACKS.

O artefato gerado não é versionado. Ele nasce a cada build/typecheck/test deste pacote e nunca é editado à mão. Se um nome do conjunto curado não existir na origem, o gerador falha alto (process.exit(1)) em vez de publicar um ícone quebrado.

Adicionar um ícone

1. Edite src/icon-set.json: adicione o nome à categoria certa (ou crie uma categoria nova).
2. Rode pnpm --filter trdr-icons build. Se o nome não existir no Material Symbols Outlined peso 400, o build falha e diz qual nome está faltando.
3. IconName e ICON_CATEGORIES já saem atualizados, sem editar mais nada.

Licença

MIT