Icoon-set toevoegen

Er zijn twee situaties waarin het nodig kan zijn om een icoon-set toe te voegen:

Je werkt aan een applicatie, die iconen nodig heeft die niet beschikbaar zijn in de standaard icoon-sets van het thema. Volg dan deze instructies: Een applicatie-specifieke icoon-set toevoegen
Je werkt aan een nieuw Manon-thema, dat eigen standaard icoon-sets nodig heeft. Volg dan deze instructies: Icoon-sets maken voor een thema

Een applicatie-specifieke icoon-set toevoegen

Een applicatie-specifieke icoon-set bestaat uit een extra icoon-lettertype en een extra set icon-{naam} classes, die samen aan een specifieke applicatie toegevoegd worden. Deze extra icoon-set kan nieuwe iconen toevoegen, die niet in het thema beschikbaar zijn, of juist bestaande iconen overschrijven.

Volg de volgende stappen:

Maak een icoon-lettertype met behulp van software of online tools om lettertypes en svg fonts mee te maken. Maak notitie van de UTF-8 codes van de verschillende iconen.

Gebruik @font-face om het lettertype toe te voegen binnen het project:

@font-face {
  font-family: "naam-van-het-icon-font";
  font-weight: normal;
  font-style: normal;
  font-display: var(--text-icon-font-display, block);
  src: url("./pad/naar/fontnaam.woff2") format("woff2"),
    url("./pad/naar/fontnaam.woff") format("woff");
}

Voeg de icon-{naam} classes voor de iconen toe aan het project. Geef elk van de classes een content met de UTF-8 code van het icoon en een font-family met de naam van het lettertype.

Kies één van deze twee manieren om de classes toe te voegen:

Handmatig:

.icon,
.icon-only {
  &.icon-extra-icoon-1::before {
    content: "\E900";
    font-family: "naam-van-het-icon-font";
  }
  &.icon-extra-icoon-2::before {
    content: "\E901";
    font-family: "naam-van-het-icon-font";
  }
}

...of met de define-icons mixin van Manon:

@use "@minvws/manon/mixins/icon";

$glyphs: (
  "extra-icoon-1": "\E900",
  "extra-icoon-2": "\E901"
);

@include icon.define-icons($glyphs, "before", "naam-van-het-icon-font");

Icoon-sets maken voor een thema

Maak een icoon-lettertype met behulp van software of online tools om lettertypes en svg fonts mee te maken. Maak notitie van de UTF-8 codes van de verschillende iconen. Zorg er bij voorkeur voor dat het icoon-lettertype alle iconen uit de standaard-sets bevat.

Gebruik @font-face om het lettertype toe te voegen aan het thema. Maak hierbij bij voorkeur gebruik van een Sass-variabele voor het basis-pad naar het lettertype:

@use "variables";

@font-face {
  font-family: "naam-van-het-icon-font";
  font-weight: normal;
  font-style: normal;
  font-display: var(--text-icon-font-display, block);
  src: url("#{variables.$font-path}/fontnaam.woff2") format("woff2"),
    url("#{variables.$font-path}/fontnaam.woff") format("woff");
}

Zie eventueel één van de standaard Manon-thema's voor een voorbeeld van hoe een variables-module gebruikt kan worden.

Stel de thema-variabele --icon-font-family in met de naam van het icoon-lettertype:
```
:root {
  --icon-font-family: "naam-van-het-icon-font";
}
```
Voeg de icon-{naam} classes voor de iconen toe aan het project. Geef elk van de classes een content met de UTF-8 code van het icoon. In tegenstelling tot bij een applicatie-specifieke icoon-set is het toevoegen van een font-family niet nodig.

Let op: voeg classes toe voor alle iconen uit de standaard icoon-sets, ook als het icoon-lettertype niet alle iconen bevat. Gebruik voor ontbrekende iconen het UTF-8-karakter "\25A1" ("missing glyph").

Gebruik bij voorkeur de define-icons mixin van Manon:
```
@use "@minvws/manon/mixins/icon";

$missing-glyph: "\25A1";

$glyphs: (
  "descending": "\E900",
  "ascending": "\E901",
  "sort": "\E902",
  "check": "\E903",
  /*
        ...
  */
  "drie-personen-in-huis": $missing-glyph,
  "gebouw-met-busje": $missing-glyph,
  "gemeentehuissvg": $missing-glyph
);

@include icon.define-icons($glyphs);
```
Neem de volledige lijst eventueel over uit één van de standaard Manon-thema's.

Let op: geef bij het aanroepen van de define-icons mixin in dit geval géén lettertype mee. De iconen gebruiken standaard het lettertype dat via de --icon-font-family property ingesteld is.

Stel de juiste UTF-8-karakters in voor componenten die een pseudo-element gebruiken voor een icoon. Als je de define-icons mixin gebruikt heb en dus een Sass map voor de icoon-glyphs, dan kan je deze uitlezen met de map.get-functie uit sass:map:

@use "sass:map";
@use "icon";

:root {
  /* Accordion */
  --accordion-button-icon-after-open-content: #{map.get(icon.$glyphs, descending)};
  --accordion-button-icon-after-close-content: #{map.get(icon.$glyphs, ascending)};
  /* Filter */
  --filter-button-icon-before-open-content: #{map.get(icon.$glyphs, descending)};
  --filter-button-icon-before-close-content: #{map.get(icon.$glyphs, ascending)};
  /* Sidemenu */
  --sidemenu-collapsed-button-icon: #{map.get(icon.$glyphs, descending)};
  --sidemenu-expanded-button-icon: #{map.get(icon.$glyphs, ascending)};
}