Icon component

[Robbert]

Extra uitdaging, de Rijkshuisstijl icons zijn niet open source. We moeten een mapping gaan aanleggen van bestaande proprietary icon IDs naar open source icons.

• Voor functionele icons kunnen we Tabler icons gebruiken: https://tabler.io/icons
• Voor overheids-onderwerpen kunnen we https://Gemeenteniconen.nl gebruiken
• Icons die geen alternatief hebben moeten we Gebruiker Centraal en Martijn Rietveld lief aankijken

[Robbert]

• [ ] Maak een object met alle icon IDs van de Rijkshuisstijl iconenset. Waarschijnlijk heeft RVO die in de codebase staan: https://nl-design-system.github.io/rvo/?path=/docs/componenten-icon-icon-overview--docs

Laten we een iconenset aanbieden, van iconen met dezelfde ID als de officiele iconen die je in productie gebruikt. De iconen vullen we dan langzaam aan voor zover we ze nodig hebben. Functionele iconen zijn waarschijnlijk als eerste aan de beurt, en elleboognies als laatste.

bijvoorbeeld zoiets:

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

const RijkshuisstijlIconID = 'menu' | 'meer' | 'elleboognies';
const IconenSet { [index: RijkshuisstijlIconID]: Icon } = {
  'menu': IconHamburgerMenu,
};

• [ ] Maak een Story aan met de wrapper van utrecht met daarin een icoon naar keuze, uit deze iconset. Bijvoorbeeld een dropdown met Object.keys(iconset)

import { Icon } from '@utrecht/...';
import { IconArrowLeft } from '@tabler/icons-react';

<Icon>< IconArrowLeft/></Icon>

• [ ] Maak de story met alle functionele iconen die de templates nu nodig hebben, de iconenset verder aanvullen komt later in een nieuwe sprint.

Voorbeeld van een iconenset-dropdown in Storybook: https://github.com/nl-design-system/utrecht/blob/7814d98cb8d8f35de250e10fb4686a7f9d0d6506/packages/storybook-css/src/Button.stories.tsx#L71-L75

[AlineNap]

Goed als wij dezelfde aanpak doen in Figma @Rozerinay. Dan bieden we via figma een biblotheek aan met alle iconen, dezelfde id namen als rijkshuisstijl zodat je die gemakkelijk kunt swappen. Dus twee bibliotheken met dezelfde component namen/ icoon-id's. 1 met de juiste rijkshuisstijl-iconen, die mag dan dus niet open source en 1 die dat nabootst.

Wellicht met instructies voor Rijkshuisstijl designers hoe je zo'n biblotheek maakt met de juiste iconen en id's.

[Rozerinay]

@AlineNap goed punt. Ik heb deze taak met een aantal subtaken in onze to-do's geplaatst.