Ga naar inhoud

Iconen

Het portaal gebruikt @tabler/icons-react (versie ^3.44.0) — dezelfde iconenset als het Tabler-thema. Er zijn ~5800 iconen beschikbaar; je hoeft ze niet vooraf te registreren, je importeert er gewoon een als React-component.

Volledige set bekijken

Blader en zoek op https://tabler.io/icons. De naam op de site staat in kebab-case (bv. file-type-pdf); de React-component is die naam in PascalCase met Icon-prefix:

Op tabler.io Import in code
check IconCheck
file-type-pdf IconFileTypePdf
users-group IconUsersGroup
external-link IconExternalLink

Gebruik

import { IconTrash } from '@tabler/icons-react';

<IconTrash size={18} stroke={2} className="text-danger me-1" />

Veelgebruikte props (zie de Tabler-docs voor alle):

  • size — pixels (in dit project: 16 in knoppen, 18 voor status/acties, 20 in lijsten).
  • stroke — lijndikte (default 2; 2.5 voor een nadrukkelijker vinkje).
  • className — kleur via Tabler/Bootstrap-classes (text-success, text-primary, text-secondary, text-danger) en spacing (me-1, me-2).

Imports worden ge-tree-shaket: alleen wat je importeert komt in de bundle. Een nieuw icoon toevoegen = simpelweg importeren; geen extra configuratie.

Bestandstype-iconen (documenten)

Pages/Beheer/Verzoeken.jsx kiest per document een icoon op basis van het MIME-type (formaat) via de helper docIcon():

MIME-type Icoon
application/pdf IconFileTypePdf
image/* IconPhoto
text/csv IconFileTypeCsv
text/* (overig) IconFileTypeTxt
Word (*word*, application/msword) IconFileTypeDocx
Excel (*excel*, *spreadsheet*) IconFileTypeXls
zip / compressed IconFileTypeZip
overig (fallback) IconFile

Er zijn nog meer IconFileType*-varianten (o.a. Jpg, Png, Ppt, Html, Js, Xml); breid docIcon() uit als je fijnmaziger wilt.

Iconen die nu in de app gebruikt worden

Houd het hierbij voor consistentie; herbruik bestaande iconen waar logisch.

IconLayoutDashboard, IconForms, IconChecklist, IconInbox, IconUsersGroup, IconKey, IconBuildingCommunity, IconUserPlus, IconHistory, IconMail, IconFileText, IconFolders, IconBoxMultiple, IconLink

Thema (Components/ThemeToggle.jsx)

IconSun, IconMoon

Acties & status

IconCheck (vinkje), IconExternalLink (openen in nieuw tabblad), IconTrash (verwijderen)

Documenten / bestandstypen (Pages/Beheer/Verzoeken.jsx)

IconFile, IconFileTypePdf, IconPhoto, IconFileTypeDocx, IconFileTypeXls, IconFileTypeZip, IconFileTypeCsv, IconFileTypeTxt