Ícones

Todos os projetos do programa usam o mesmo ícone para a mesma coisa. Quem aprende que a régua é "Medições" no P19 encontra a régua em "Medições" em qualquer outro sistema do Tribunal. Esta página diz qual ícone usar, em que tamanho e como deixá-lo acessível.

Os ícones vêm do Bootstrap Icons, que já vem com o pacote. Para mostrar um ícone, use o BaseIcon ou a propriedade icon do componente (BaseButton, BaseCard, BaseKpiCard, BaseEmptyState, o menu do BaseAppShell). A página do BaseIcon lista todos os ícones da versão instalada.

Tamanho por lugar

Cada lugar da tela tem um tamanho só. O componente já aplica o tamanho certo: passe só o nome do ícone, sem classe nem estilo para mudar o tamanho.

Onde	Tamanho	Como passar
Menu lateral	16 px	icon de cada item do nav do BaseAppShell
Botão e campo	16 px	icon do BaseButton, icon-start do BaseInput
Rótulo de indicador	16 px	icon do BaseKpiCard
Título de cartão	20 px	icon do BaseCard
Estado vazio	24 px, numa caixa azul-clara	icon do BaseEmptyState
Ícone solto no texto	16 px (sm)	BaseIcon com size="sm"

O título da página (BasePage) não tem ícone. O título já diz onde a pessoa está, e o ícone dela aparece no item do menu.

Contorno ou preenchido

• Contorno para os assuntos e as ações: menu, cartões, indicadores, botões e estados vazios. Exemplo: rulers, pencil.
• Preenchido (-fill) só para a situação: sucesso, atenção, erro e informação. Os componentes de aviso (BaseAlertBanner, BaseToast, BaseKpiCard com tone, BaseProgress) já põem esses ícones sozinhos.
• O item atual do menu muda de cor, não de desenho. Um mesmo assunto nunca aparece com contorno num lugar e preenchido em outro.

Situação	Ícone
Concluído, sucesso	check-circle-fill
Atenção	exclamation-triangle-fill
Erro	exclamation-circle-fill
Informação	info-circle-fill

Acessibilidade

• Ícone ao lado de um texto que diz a mesma coisa: é decorativo. Não passe label. O BaseIcon põe aria-hidden="true" e o leitor de tela lê só o texto. É o caso do menu, dos botões com texto, dos títulos de cartão e dos estados vazios.
• Ícone sozinho que diz algo: passe label, por exemplo <BaseIcon name="check-circle-fill" label="Concluído" />. O leitor de tela anuncia "Concluído".
• Ícone sozinho que faz uma ação: use BaseButton com icon-only e label. O botão recebe foco, responde ao teclado e mostra a dica ao passar o mouse. Nunca ponha clique num BaseIcon.
• A cor nunca é o único sinal. Uma situação também aparece em texto, como no BaseBadge.

Mapa dos ícones

Use o ícone da tabela sempre que o assunto aparecer: no menu, no título do cartão, no indicador, no botão e no estado vazio. Se o assunto não está aqui, escolha um ícone de contorno que ainda não esteja na tabela e peça para incluí-lo nesta página, no mesmo pull request.

Obras e contratos (P19)

Assunto	Ícone
Início	house
Obras e contratos (lista)	buildings
Contrato	file-earmark-text
Dados e equipe do contrato	people
Medições	rulers
Boletim de medição	clipboard-data
Carga inicial	cloud-upload
Importar contrato	box-arrow-in-down
Empenhos	cash-coin
Termos aditivos	file-earmark-plus
Garantias e ART	shield-check
Documentos	folder2-open
Ordens de serviço	clipboard-check
Contratos ativos	speedometer2
Alertas	bell
Orçamento comprometido	pie-chart
Orçamento e remanejamentos	arrow-left-right
Orçamento do ano	bank
Saldo	piggy-bank
Valor em reais	cash-stack
Relatórios	file-earmark-bar-graph
Prazo, vencimento	calendar-event
Fotos	images

Imóveis (P20)

Assunto	Ícone
Imóveis	houses
Comarca, endereço	geo-alt
Painel de áreas, área interna	bounding-box
Área de terreno	map
Pavimentos e ambientes	layers
Plantas	file-earmark-ruled
Bens patrimoniais	box-seam

Ações

Ação	Ícone
Cadastrar, incluir, novo	plus-lg
Alterar, editar	pencil
Excluir, remover	trash
Exportar ou gerar PDF	file-earmark-pdf
Baixar arquivo	download
Enviar arquivo	upload
Filtrar	funnel
Buscar	search
Limpar filtros, fechar	x-lg
Voltar	arrow-left
Ver, visualizar	eye
Ver versões, histórico	clock-history
Assinar	pen
Renovar	arrow-repeat
Designar pessoa	person-plus
Tirar pessoa	person-dash
Entrar	box-arrow-in-right
Sair	box-arrow-right

Telas de sistema

Tela	Ícone
Sem permissão, fechado para alteração (medição fechada)	lock, o mesmo do BasePageState sem permissão
Página não encontrada	signpost-split
Lista vazia sem assunto próprio	inbox

Faça e não faça

Faça	Não faça
Dê a cada item do menu o ícone do seu assunto.	Repita o mesmo ícone em vários itens do menu: no menu recolhido, só os ícones aparecem.
Use o ícone da tabela em todos os lugares do assunto: menu, cartão, indicador.	Escolha outro ícone para o mesmo assunto numa tela nova.
Deixe o componente escolher o tamanho.	Mude o tamanho com classe ou estilo na tela.
Use contorno nos assuntos e preenchido só na situação.	Use -fill num item do menu ou num título de cartão.