VEMAP Icons Design en gebruik

Overzicht van architectuurkeuzes en design principes voor alle beschikbare icon componenten in de applicatie. Alle icons zijn Astro componenten en accepteren standaard html en svg attributen.

Architectuur & Design Keuzes

Waarom eigen icon componenten?

In plaats van het gebruik van third-party libraries zoals astro-icon, gebruikt deze applicatie eigen icon componenten. Deze keuze is gemaakt om twee kritieke problemen te voorkomen:

Probleem 1: Conflicten in productie

astro-icon behandelt alle iconen van hetzelfde type als hetzelfde object. Bij het gebruik van Alpine.js directives zoals x-show kunnen hierdoor conflicten ontstaan:

<!-- Met astro-icon: beide krijgen dezelfde state properties -->
<Icon name="mdi:loading" class="size-5" x-show="isLoading" />
<Icon name="mdi:loading" class="size-6" x-show="isSaving" />
<!-- Resultaat: lege buttons of incorrecte visibility -->

Probleem 2: Consistentie en onderhoudbaarheid

Eigen icon componenten bieden:

Centrale controle: aanpassingen op één plek worden overal toegepast
Type-veiligheid: geen typo’s in icon namen
Performance: inline SVGs, geen runtime loading
Geen externe dependencies: volledige controle

Icon Component Structuur

Alle icon componenten volgen dezelfde structuur:

---
const { class: className, ...props } = Astro.props;
---

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  class={className}
  {...props}
>
  <path fill="currentColor" d="..." />
</svg>

Key features:

class: className: Rename omdat class een reserved keyword is in JavaScript
...props: Spread operator voor aria-labels, Alpine.js directives, etc.
fill="currentColor": Icons kleuren mee met de huidige text color via text-* classes
Elke icon instantie is uniek (geen shared state) → Alpine.js directives werken correct

Naamconventies

Icon componenten volgen een consistente naamgeving:

PascalCase voor component naam (bijv. LoadingIcon, CheckIcon)
Beschrijvend: de naam beschrijft de actie of het object (bijv. EmailArrowRightIcon, QuickSendMailIcon)
Actie als prefix: bijvoorbeeld AddUserIcon of EditUserIcon voor iconen die gebruikt worden voor het aanduiden van een actie.
Object als suffix: bijvoorbeeld UserIcon of FolderIcon voor iconen die gebruikt worden voor het aanduiden van een object.
Icon als suffix: bijvoorbeeld LoadingIcon of CheckIcon voor iconen die gebruikt worden voor het aanduiden van een actie.

Properties

Alle icons accepteren standaard html en svg properties:

Property	Type	Beschrijving
`class: className`	`string`	Tailwind classes voor styling
`...props`	`object`	Spread operator voor overige `html`/`.svg`/`Alpine.js` properties

Alpine.js Compatibility

Elke icon instantie is uniek (geen shared state), dus Alpine.js directives werken correct:

<LoadingIcon class="size-5 animate-spin" x-show="isLoading" />
<LoadingIcon class="size-6 animate-spin" x-show="isSaving" />
<CheckIcon class="size-5 text-green-500" x-show="isValid" x-cloak />

Gebruik

---
import SaveIcon from './components/icons/SaveIcon.astro';
---

<!-- Basis gebruik -->
<SaveIcon />

<!-- Met custom class -->
<SaveIcon class="size-6 text-map-orange" />

<!-- In button -->
<Button>
  <SaveIcon slot="iconBefore" class="size-5" />
</Button>

Voorbeelden

<!-- In buttons met conditional rendering -->
<Button isPrimary>
  <SaveIcon slot="iconBefore" class="size-5" x-show="!isLoading" />
  <LoadingIcon slot="iconBefore" class="size-5 animate-spin" x-show="isLoading" />
</Button>

<!-- Conditional display -->
<div class="flex items-center gap-2">
  <CheckIcon x-show="isValid" class="size-5 text-green-500" />
  <WarningIcon x-show="!isValid" class="size-5 text-red-500" />
</div>

Bestandenstructuur

Een overzicht van alle icons grbruikt in de VEMAP frontend. Bedoelt als naslagwerk voor snel inzicht in aanwezige icons en hun gebruik.

Directoryicons/
- AccountIcon.astro
- AddFileIcon.astro
- AddFolderIcon.astro
- AddMultipleUsersIcon.astro
- AddTenantIcon.astro
- AddUserIcon.astro
- AlarmIcon.astro
- ApproveFileIcon.astro
- ArchiveIcon.astro
- ArrowDownIcon.astro
- ArrowUpIcon.astro
- BarrierIcon.astro
- CalendarIcon.astro
- CancelSaveContentIcon.astro
- CheckIcon.astro
- ChevronDownIcon.astro
- ChevronRightIcon.astro
- CloseIcon.astro
- CreateMailListIcon.astro
- DeleteFileIcon.astro
- DeleteTenantIcon.astro
- DeleteUserIcon.astro
- DesktopIcon.astro
- DocumentationIcon.astro
- DownloadFileIcon.astro
- EditFolderIcon.astro
- EditIcon.astro
- EditListIcon.astro
- EditTenantIcon.astro
- EditUserIcon.astro
- EmailArrowRightIcon.astro
- FileCertificateIcon.astro
- FileIcon.astro
- FileImageIcon.astro
- FileStarIcon.astro
- FirstNotificationIcon.astro
- FolderIcon.astro
- HelpIcon.astro
- HidePasswordIcon.astro
- InfoIcon.astro
- LoadingIcon.astro
- LogoutIcon.astro
- MessageBubbleIcon.astro
- MissingIcon.astro
- MoveUserIcon.astro
- MultipleUsersIcon.astro
- NoEntryIcon.astro
- OpenFolderIcon.astro
- QuestionMarkIcon.astro
- QuickSendMailIcon.astro
- RevokeTenantAccess.astro
- SaveContentIcon.astro
- SaveEditIcon.astro
- SecondNotificationIcon.astro
- SendIcon.astro
- ShowPasswordIcon.astro
- StopSignIcon.astro
- SupportIcon.astro
- TemplateIcon.astro
- ThirdNotificationIcon.astro
- TrafficConeIcon.astro
- TrashCanIcon.astro
- UploadFileIcon.astro
- UploadMultipleFilesIcon.astro
- UploadToCloudIcon.astro
- UserCardIcon.astro
- ViewArchiveIcon.astro
- ViewContentFolderIcon.astro
- WarnFileIcon.astro
- WarningRoundIcon.astro
- WarningTriangleIcon.astro