PJC Icons

Biblioteca de ícones SVG para Angular, mantida pela equipe GEIA Sistemas Policiais.
Agnóstica de UI framework — funciona com Angular Material, PrimeNG, Tailwind ou nenhum deles.

Instalação

npm install pjc-icons

Requisitos: Angular >=17.1.0. Nenhuma dependência de UI obrigatória.

Uso padrão

Importe PjcIconComponent diretamente no componente que precisar:

import { PjcIconComponent } from 'pjc-icons';

@Component({
  imports: [PjcIconComponent],
  template: `<pjc-icon name="aluno" />`,
})
export class MeuComponent {}

<pjc-icon name="aluno" />
<pjc-icon name="professor" ariaLabel="Professor" />
<pjc-icon name="delegacia" style="font-size: 2rem;" />

O tamanho é controlado via font-size (herda 1em por padrão).
A cor herda currentColor do CSS — basta setar color no elemento pai.

Tipagem

Todos os nomes de ícone são exportados como o tipo PjcIconName.
O TypeScript valida em tempo de compilação — nomes errados viram erro de build.

import type { PjcIconName } from 'pjc-icons';

const icone: PjcIconName = 'aluno';      // ✅
const errado: PjcIconName = 'fantasma';  // ✗ erro de compilação

Para iterar sobre todos os ícones (ex.: uma página de browser):

import { PJC_ICON_NAMES } from 'pjc-icons';
// PJC_ICON_NAMES: readonly PjcIconName[]  — 352 ícones, ordem alfabética

Uso dentro de PrimeNG

PrimeNG não tem um registry central. Use <pjc-icon> dentro dos templates de ícone que cada componente expõe via pTemplate.

<!-- p-button com ícone customizado -->
<p-button label="Salvar">
  <ng-template pTemplate="icon">
    <pjc-icon name="delegacia" />
  </ng-template>
</p-button>

<!-- p-splitButton, p-menu, p-select, etc. — mesma convenção -->
<p-select>
  <ng-template pTemplate="dropdownicon">
    <pjc-icon name="seta_baixo" />
  </ng-template>
</p-select>

Cada componente PrimeNG define seus próprios nomes de template (icon, dropdownicon, closeicon, etc.). Consulte a documentação do componente específico.

Compatibilidade com Angular Material (legacy)

Se o projeto já usa <mat-icon svgIcon="pjc_icons:nome">, importe o entry point secundário:

import { registerPjcIcons } from 'pjc-icons/material';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

// Em um provider de injeção ou no construtor da classe raiz:
registerPjcIcons(inject(MatIconRegistry), inject(DomSanitizer));

<mat-icon svgIcon="pjc_icons:aluno"></mat-icon>

Projetos que usam o módulo legado podem continuar com:

// ⚠️ Deprecated — use PjcIconComponent diretamente
import { PjcIconModule } from 'pjc-icons/material';

Apenas quem importar de pjc-icons/material passa a depender de @angular/material. O core da lib permanece sem essa dependência.

API do componente

| Input | Tipo | Padrão | Descrição | |---|---|---|---| | name | PjcIconName | — (obrigatório) | Nome do ícone | | size | string | '1em' | Tamanho (aceita qualquer unidade CSS) | | ariaLabel | string | '' | Label acessível; se vazio, o SVG recebe aria-hidden="true" |

Licença

MIT — GEIA Sistemas Policiais