Ícones
Curadoria Tabler Icons com orientação por stack. Use componentes SVG em frameworks e webfont local apenas quando fizer sentido.
Como usar
Tabler é a biblioteca de referência visual. Em apps React, Next, Vue ou Nuxt,
prefira os pacotes SVG do framework; em HTML ou Astro estático, a webfont local
de @itps/styles continua disponível.
React / Next
Instale pnpm install @tabler/icons-react
(instalação React)
e importe só o componente usado, como
IconHeartbeat.
Use size={24},
stroke={2} e
color="currentColor".
Vue / Nuxt
Instale pnpm install @tabler/icons-vue
(instalação Vue)
e importe o componente SVG equivalente. Mantenha o mesmo padrão visual:
size=24,
stroke=2 e cor herdada.
HTML / Astro
Para páginas estáticas simples, use a webfont que vem com
@itps/styles:
ti ti-<nome>.
Fora do pacote Sinapse, use
instalação webfont. Para aplicações com build e poucos ícones,
SVG tende a ser mais previsível.
Nome
A grade abaixo usa nomes Tabler em kebab-case, como
heartbeat. Na webfont vira
ti ti-heartbeat; em componentes SVG vira
IconHeartbeat. Clique em um ícone para copiar
o nome base. Consulte o
catálogo oficial
para buscar nomes fora da curadoria.
Acessibilidade
Ícone decorativo usa aria-hidden="true".
Em botões sem texto visível, o controle precisa de nome acessível.
Saúde e medicina
Atendimento, vigilância, pesquisa biomédica.
Dados e análise
Dashboards, relatórios e visualização epidemiológica.
Geografia e tempo
Localização, períodos, calendário epidêmico.
Ações e navegação
Operações comuns, busca, filtros, controles.
Status e comunicação
Feedback, alertas, notificações, perfis.