Componentes
45. Iconografia
seed-componentes.md v1.43 · §45seção 47 de 9845-iconografia-estavel-v0-47-ic1-ic7-nm1-nm6-bloco.md · MD5 ab00c85fTítulo completo no canon: Iconografia — estável (v0.47) · IC1–IC7 + NM1–NM6 · Bloco 7 · suite suite-icones.mjs 25/25 ✓ · render 5/0 · regressão total 445 jsdom + 43 render (ancorada por MD5) · gate visual do Rafael aprovado 2026-08-07 · FECHA A FASE 3
Papel: guidelines de construção (IC) + nomenclatura e governança (NM) + inventário do set canônico SEED. Seção única do bloco (decisão de formato aprovada em 2026-08-07). Fronteira registrada: se o set expandir de verdade (F5 dataviz / F7 aplicações), nasce
seed-icones.mdpor supersede formal, com versão própria (NM5). Base: 3 rodadas encadeadas (R1 Lucide design rules + Material icon grid/keylines + Carbon sizes → R2 shadcn/lucide-react — o consumo real do §44/GI4 — + Heroicons/Phosphor → R3 WAI decorative images + non-text contrast 3:1 + aliases CFPB/Carbon). Preview:seed-icones-preview.htmlv0.46.
45.1 Decisões IC — Fundamentos do ícone#
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| IC1 | Grid canônico 24×24 (viewBox="0 0 24 24"); o acervo 40×40 migra na normalização (fator 0.6) |
Lucide — o set que os pares shadcn do §44/GI4 consomem — desenha em 24×24; Material usa 24dp; grid igual = mistura SEED×Lucide sem drift de peso. Fato medido: o 40×40 com stroke 1.8 rende 1.08px a 24px — mais fino que toda a UI | Manter 40×40 (incompatível lado a lado com Lucide); 32 do Carbon (ninguém na stack consome) |
| IC2 | Área viva/padding: piso mecânico = padding ≥1px (conteúdo dentro de 1…23, medível por getBBox()); keylines Material (quadrado 18, círculo 20, retângulos 20×16) como guia óptico de construção, não asserção |
O piso de 1px é a régua do Lucide — piso mais rígido (2px Material) reprovaria ícones Lucide legítimos na suite. Keyline como teste mecânico geraria falso-positivo em formas assimétricas | Padding 2px Material como asserção (conflita com Lucide); sem piso (ícone colado na borda colide com texto vizinho) |
| IC3 | Stroke: valor ÚNICO 2px no grid 24 · cap round · join round · radius 2px · stroke centrado. Renderização proporcional nos tamanhos de uso (SVG default), com trava de piso 16px |
Régua Lucide literal (2/24, round/round, radius 2) = convivência perfeita com o set utilitário do GI4. Decisão MEDIDA: o 1.8/40 atual (=1.08/24) fica abaixo do peso do resto da UI. A trava de 16px vem do Carbon: traço fino quebra no tamanho glyph | Régua por tamanho (re-otimizar stroke a 16/20/24 como Carbon/Heroicons): 3–4 variantes por ícone sem time dedicado; Lucide prova que valor único + piso funciona. absoluteStrokeWidth como default (peso dispara em tamanhos grandes) |
| IC4 | Tamanhos de uso: 16 / 20 / 24 (escala de UI) + 32/40 display. Travas: 16 = piso absoluto, só inline com texto pequeno/células densas; 20 = campos e ações secundárias; 24 = navegação e ações primárias (padrão); ≥32 = só empty state/destaque/marketing | Interseção Carbon (16/20/24/32) × prática Lucide × Material (20/24/40/48); os previews dos Blocos 1–6 já usam 16–24 de fato | Escala livre por tela (drift de densidade); tamanho único (mata o inline denso do ERP) |
| IC5 | Cor SÓ via currentColor — o ícone herda o token semântico do contexto (--seed-text-*, --seed-feedback-*); zero hex/rgb dentro do glifo (asserção IC-07/IC-08 na suite). Contraste non-text 3:1 medido por script sobre os fundos canônicos |
Regra estrutural do DS desde o B1 (cor só via token) aplicada ao grão do glifo; os 16×#11B0A0 / 17×#098475 / 6×#FAD61D hardcoded do acervo eram exatamente o drift que o B1 combateu. Pares medidos nesta data: 13.35–15.59 (primary), 5.06 (secondary), 4.60 (success) — todos ≥3:1 ✅ | Cor por classe no glifo (duplica a fonte); presets de cor "de marca" dentro do SVG (quebra dark de graça) |
| IC6 | Anatomia: wrapper único canônico — fill="none" no <svg>, formas em stroke; preenchimentos internos pontuais permitidos (fill="currentColor" em núcleos ≤ r2, ex.: sol, gerador) e nada além de currentColor/none; sem width/height fixos no arquivo-fonte (o consumo dimensiona); coordenadas com 1 decimal máx. |
O wrapper único torna todo glifo intercambiável e testável pela mesma asserção; fills pontuais são prática Lucide (ex.: dot) e preservam a leitura em tamanhos pequenos | Glifos duotone/filled como variante padrão (dobra o set sem demanda — fica como fronteira F5+); precisão de 3+ decimais (ruído de diff) |
| IC7 | Acessibilidade: ícone decorativo por padrão — aria-hidden="true" + focusable="false" no próprio arquivo-fonte; ícone informativo (sem texto adjacente) = wrapper com role="img" + aria-label no PONTO DE USO, nunca no arquivo. Regra vigente mantida: ícone informativo é sempre SVG do set, nunca caractere unicode (X6-b, marco v1.0) |
eBay evo + WAI decorative images (o padrão do §32/AV): o nome vive no texto/rótulo, o glifo decora; focusable="false" custa zero e blinda legado IE/Edge |
<title> interno como canal único (suporte irregular leitor×browser vs. aria-label); role="presentation" (aria-hidden basta e é o padrão do ecossistema) |
45.2 Decisões NM — Nomenclatura e governança#
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| NM1 | Nomes em inglês internacional, kebab-case, conceito-variante (chevron-down, check-circle) — nomeando o objeto, não a ação (arrow-right, não go-forward). Aliases PT-BR obrigatórios nos metadados (a busca da ⌘K §39 consome os dois idiomas). Supersede aplicado: add → circle-plus (conceito-variante: o glifo do acervo é círculo+cruz; plus nu no Lucide é outro desenho — a auto-auditoria do lote pegou a imprecisão antes do gate) |
Convenção Lucide literal → mapa 1:1 entre o vocabulário SEED e o utilitário; evita dupla convenção na mesma camada de código (o acervo já está em inglês — fato). Aliases com busca é o padrão CFPB/Carbon | Nomes PT-BR (colide com Lucide lado a lado; quebra substituição 1:1); ação-primeiro (o mesmo glifo serve várias ações) |
| NM2 | Metadados mínimos por ícone: nome canônico · categoria · aliases PT/EN · equivalência Lucide (ou —) · origem · versão de entrada · status (ativo/aposentado). Vivem na tabela-inventário 45.3 |
Sem metadado, a busca da ⌘K e a auditoria não têm o que consumir; governança nasce barata agora ou cara depois | Metadado em arquivo paralelo (fragmenta a fonte antes de existir demanda) |
| NM3 | Categorias fixas (6): ações · navegação · status/feedback · domínio SEED (energia/solar/elétrico/engenharia) · comunicação/contato · arquivos/dados | Cobre os 43 componentes + o acervo real; "domínio SEED" é a categoria que justifica o set existir | Taxonomia aberta (categorias proliferam e a busca degrada) |
| NM4 | Relação set SEED × Lucide (1ª classe, dialoga com §44/GI4): Lucide é o vocabulário UTILITÁRIO padrão do produto (os pares shadcn nomeados já o consomem via seed-ds-ui — fato do GI4); o set SEED é a camada de DOMÍNIO E MARCA. Árvore "criar × usar": ① existe no set SEED → usa SEED; ② não existe no SEED mas existe no Lucide → usa Lucide (produto/UI); ③ não existe em nenhum → cria no set SEED pela régua IC, entrando com nome+aliases+versão; ④ proibido importar de 3º set (Phosphor/Heroicons/Material). Em peças de marketing/documentos, o SEED tem precedência quando o glifo existir. IC1/IC3 adotam a régua Lucide DE PROPÓSITO: mistura sem drift de peso |
Substituir Lucide por um set SEED completo (~1.500 glifos) é inviável e destruiria o GI4; ignorar a fronteira deixa cada tela decidindo sozinha. A convivência com régua física idêntica é o único desenho em que os dois sets são indistinguíveis em peso | Set SEED total (custo proibitivo); Lucide para tudo (mata a camada de marca nos pilares/domínio); mistura livre de sets (drift que o Bloco 1 inteiro combateu) |
| NM5 | Versionamento: o set versiona junto do seed-componentes.md enquanto viver no §45; cada ícone carrega versão de entrada. Fronteira mantida: se o set expandir de verdade (F5/F7), nasce seed-icones.md por supersede formal, com versão própria |
Um arquivo cumulativo é a decisão de formato aprovada; versão por ícone dá rastreabilidade sem burocracia | Versão semântica própria do set desde já (peso sem demanda) |
| NM6 | Deprecação: nada deletado antes do substituto existir (regra estrutural vigente); ícone aposentado ganha supersede formal na tabela 45.4 (nome antigo → novo · motivo), sai do preview, permanece listado como aposentado até a morte formal do HTML v1 (F8) |
Regra do DS aplicada ao grão do ícone; a F8 já prevê o supersede das 30 seções do HTML v1 — o inventário do §45 vira o insumo | Deleção silenciosa (quebra rastreabilidade); manter aposentados no preview (polui o set vivo) |
Obrigação identificada para a skill seed-ds-ui (padrão GI2 — pendência DELA, não supersede daqui): quando a skill for editada, expor a árvore NM4 (SEED → Lucide → criar) e o mapa de equivalências do inventário, para o código de produção saber quando importar de lucide-react e quando usar o componente do set SEED.
45.3 Inventário do set canônico — 31 glifos ativos (28 na v0.47 + 2 na v1.39, FV-P5 + 1 na v1.42, MANIFESTO §150)#
| Nome | Categoria | Aliases (busca ⌘K) | Lucide equiv. | Origem | Veredito 7B | Versão · status |
|---|---|---|---|---|---|---|
battery |
domínio | bateria, armazenamento, carga | battery |
HTML v1.0 idx36 | normalizar | v0.46 · ativo |
bolt |
domínio | raio, energia, eletrico, zap | zap |
redesenho idx31 | redesenhar | v0.46 · ativo |
building |
domínio | predio, empresa, comercial, edificio | building-2 |
HTML v1.0 idx35 | normalizar | v0.46 · ativo |
drop |
domínio | gota, agua, hidrica | droplet |
HTML v1.0 idx33 | normalizar | v0.46 · ativo |
generator |
domínio | gerador, gmg, grupo-gerador, motor | — |
redesenho idx14 → REDESENHADO em 2026-09-05 pelo modelo em foto dele (MANIFESTO §150, T-GMG; supersede em §45.4): contêiner de cantos arredondados, chaminé com tampa no topo à direita, porta do painel à esquerda com dois indicadores, raio grande no centro-direita, pés | redesenhar | v1.42 · ativo |
hard-hat |
domínio | obras, capacete, campo, canteiro, execucao | hard-hat |
novo — FV-P5 (destaque Obras, 2026-09-05) | criar (NM4 ③) | v1.39 · ativo |
leaf |
domínio | folha, sustentabilidade, verde, eco | leaf |
HTML v1.0 idx32 | normalizar | v0.46 · ativo |
lightbulb |
domínio | lampada, ideia, iluminacao, luz | lightbulb |
HTML v1.0 idx30 | normalizar | v0.46 · ativo |
lightning-rod |
domínio | para-raios, spda, protecao | — |
novo — gap pilar | criar | v0.46 · ativo |
plug |
domínio | tomada, plugue, conexao, eletrico | plug |
HTML v1.0 idx37 | normalizar | v0.46 · ativo |
recycle |
domínio | reciclagem, reuso, ciclo | recycle |
HTML v1.0 idx40 | normalizar | v0.46 · ativo |
solar-panel |
domínio | painel, placa, modulo, fotovoltaico | solar-panel (IC-P2: a coluna dizia —; o Lucide TEM solar-panel — conferido em 2026-09-05 no main; corrigido por ordem dele, MANIFESTO §149) |
HTML v1.0 idx29 | normalizar | v0.46 · ativo |
solar-panel-plus |
domínio | seed-plus, manutencao, plano, usina, ufv, plus, painel | — |
novo — FV-P5 (destaque SEED Plus, 2026-09-05) | criar (NM4 ③) | v1.39 · ativo |
substation |
domínio | subestacao, cabine, media-tensao, mt | — |
HTML v1.0 idx13 | normalizar | v0.46 · ativo |
sun |
domínio | sol, solar, energia | sun |
HTML v1.0 idx28 | normalizar | v0.46 · ativo |
transformer |
domínio | transformador, trafo, subestacao | — |
novo — gap pilar | criar | v0.46 · ativo |
transmission-tower |
domínio | torre, alta-tensao, transmissao, linha, lt | — (o Lucide main não tem transmission-tower — HTTP 404 conferido em 2026-09-05; o utility-pole dele é poste com travessa, outro objeto) |
novo — MANIFESTO §150 (T-TORRE, 2026-09-05: torre de transmissão desenhada pelo modelo em imagem dele; destaque Subestações) | criar (NM4 ③) | v1.42 · ativo |
circle-plus |
ações | adicionar, novo, mais, criar, add, plus | circle-plus |
HTML v1.0 idx49 | renomear | v0.46 · ativo |
search |
ações | busca, buscar, procurar, lupa | search |
HTML v1.0 idx50 | normalizar | v0.46 · ativo |
settings |
ações | configuracoes, ajustes, engrenagem | settings |
HTML v1.0 idx38 | normalizar | v0.46 · ativo |
arrow-right |
navegação | seta, avancar, proximo, direita | arrow-right |
HTML v1.0 idx48 | normalizar | v0.46 · ativo |
dashboard |
navegação | painel, dashboard, visao-geral, grid | layout-dashboard |
HTML v1.0 idx51 | normalizar | v0.46 · ativo |
home |
navegação | casa, inicio, residencial | house |
HTML v1.0 idx34 | normalizar | v0.46 · ativo |
check |
status/feedback | confirmado, ok, sucesso, feito | check |
HTML v1.0 idx47 | normalizar | v0.46 · ativo |
email |
comunicação | e-mail, mensagem, mail, envelope | mail |
HTML v1.0 idx44 | normalizar | v0.46 · ativo |
location |
comunicação | local, endereco, pin, mapa, map-pin | map-pin |
HTML v1.0 idx42 | normalizar | v0.46 · ativo |
people |
comunicação | pessoas, equipe, clientes, usuarios | users |
HTML v1.0 idx41 | normalizar | v0.46 · ativo |
phone |
comunicação | telefone, ligar, contato | phone |
HTML v1.0 idx43 | normalizar | v0.46 · ativo |
calendar |
arquivos/dados | calendario, agenda, data | calendar |
HTML v1.0 idx45 | normalizar | v0.46 · ativo |
document |
arquivos/dados | documento, arquivo, relatorio, file | file-text |
HTML v1.0 idx46 | normalizar | v0.46 · ativo |
growth |
arquivos/dados | crescimento, grafico, tendencia, alta | trending-up |
HTML v1.0 idx39 | normalizar | v0.46 · ativo |
45.4 Aposentadorias e renomes (supersedes formais do acervo HTML v1.0)#
| Item do acervo | Motivo | Supersede |
|---|---|---|
| (pilar Energia Solar idx12) | duplicata de sun §45 |
→ sun |
| (pilar Projetos idx15) | duplicata de document |
→ document |
| (pilar Consultorias idx16) | duplicata de lightbulb |
→ lightbulb |
| (valor Energia Solar idx19) | duplicata de sun (variante fill) |
→ sun |
| (valor Eficiência idx20) | duplicata de bolt (variante fill) |
→ bolt |
| (valor Sustentabilidade idx21) | duplicata de drop/leaf |
→ drop |
| add (idx49) | nome de ação viola NM1; glifo círculo+cruz | → circle-plus (renomeado) |
recycle v0.46 |
Gate visual de 2026-08-16: "parecem errados, infantilizados". O desenho era dois galos soltos mais duas linhas desconectadas — não fechava triângulo e não lia como reciclagem em tamanho nenhum | → recycle v0.48, redesenhado pela régua IC1/IC3: triângulo equilátero de circunraio 8,6, três braços de 8% a 90% de cada lado, cabeça de seta de 2,6 a 32°. getBBox medido em 4,4…18,8 (piso IC2 é 1…23) |
growth v0.46 |
Mesmo gate. Era o trending-up do acervo 40×40 normalizado por 0,6: ziguezague raso e "cabeça" em L pequena, que lia como rabisco |
→ growth v0.48, realinhado à geometria Lucide que o IC1/IC3 adota de propósito (§45.3 já declarava a equivalência trending-up): polilinha 21.4 7.6 → 13.4 15.6 → 8.6 10.8 → 2.6 16.4 + colchete 16 7.6 → 21.4 7.6 → 21.4 13. getBBox 2,6…21,4 |
generator v0.46 |
Veredito dele de 2026-09-05 (MANIFESTO §149/§150, T-GMG): o desenho — caixa 2,5…15,5 com dois pontos preenchidos r 1 a 3,5 de distância (com traço 2 os pontos de 4 px se sobrepunham) e um bocal à direita — lia como filmadora a 154 e 360 px nos destaques do Instagram (diagnóstico em preview/gate-apoio-traco/estudo-torre.html); ordem verbatim: "T-GMG: redesenhar agora — segue foto anexa de exemplo para usar" |
→ generator v1.42, redesenhado pela foto dele (descrita no §150): contêiner 3…21 × 5…20 rx 2, chaminé x 18 até y 2 com tampa 16,5…19,5, porta x 10, raio em polilinha 16 8 · 13,5 12,5 · 17,5 12,5 · 14 17 (família do battery-charging do Lucide, que lê a 24 px), dois indicadores r 0,5 preenchidos no painel da porta (6,5 · 8,5 e 6,5 · 12,5: 3 px cada a 24 px, 1 px de fundo até a parede e até a porta — medido na captura), pés 7 e 17 de 20 a 22. getBBox 3…21 × 2…22. Densidades G1 (sem indicadores nem pés) e G2 (indicadores no alto, como na foto — o raio encolhe a 6 unidades e vira rabisco a 24 px) ficam renderizadas em preview/gate-apoio-glifos-r2/, expostas a veto |
Nota de método sobre estes dois supersedes. Nenhum dos dois glifos foi importado: o
recyclefoi desenhado aqui, pela régua IC, e ogrowthfoi realinhado à geometria do Lucide que o IC1/IC3 adota de propósito para que os dois sets convivam sem drift de peso. A árvore NM4 não foi acionada — ela decide criar × usar, e aqui o glifo já existia no set SEED; o que houve foi correção de desenho, com a versão do ícone subindo dev0.46parav0.48.O que reprovou foi o OLHO, e nenhuma camada automatizada tinha como pegar: a
suite-icones(25 · 0) mede anatomia, nomenclatura e acessibilidade; arender-icones(5 · 0) medegetBBox,currentColor, alvo e overflow. Os dois desenhos velhos passavam nas duas. Legibilidade de forma não é medível pelas guardas que existem hoje — e isso fica registrado como a razão de o gate visual ser camada, não formalidade.
45.5 Os 7 testes (adaptados à natureza de guideline+set)#
1 ✓ funciona (glifos renderizam nos 2 temas — R-02/R-05) · 2 sem cor-única (currentColor + mecanismo do contexto) · 3 grayscale ok (traço carrega a forma) · 4 nome do glifo entendido a 1s no grid · 5 um peso por sistema (stroke 2 único — IC-03) · 6 decorativo declarado (A11Y-01) · 7 360px sem overflow e alvo ≥44px no consumo (R-03/R-04).
Validação executada: suite-icones.mjs 25/25 ✓ (IC 8 · NM 8 · A11Y 4 · interação 5) + render-icones.mjs 5 verificações/0 achados (getBBox de 28/28 dentro de 1…23 — o piso IC2 é asserção de render, não de jsdom). Contraste: 6 pares ≥3:1 medidos por script antes da spec.
Promoção a estável (2026-08-07, v0.47) — os gates, um a um: suite jsdom 25/25 ✓ · render 5 verificações / 0 achados · 6 pares de contraste non-text ≥3:1 · regressão total ancorada por MD5 (não por tamanho de arquivo): 445 verdes jsdom + 43 verificações render / 0 achados + 4 scripts de contraste no gate · gate visual do Rafael APROVADO em 2026-08-07. Com esta promoção o Bloco 7 fecha 1/1 e a Fase 3 fecha 7/7 blocos. Nota de rastreabilidade honesta: a data do gate visual (2026-08-07) é a do briefing em que o Rafael autorizou esta promoção; se o gate tiver ocorrido em outra data, corrigir aqui por errata. Nota de contexto: esta mesma execução resgatou o seed-navegacao-preview.html v0.40 (sobrescrito no repositório) e reconstruiu 2 artefatos de validação perdidos do Bloco 5 — ver o log da v0.47 no cabeçalho e o CHECKPOINT_v1_4_bloco7_iconografia.md.
Também cita o §45: banco-identidade, banco-prioridade.