Omschrijving

Dit package bevat de specifieke code voor het component. Als je alle rijkshuisstijl community componenten wil kijk dan naar [https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/components-react/README.md]. Voor verdere informatie over het inzet van de component kijk naar onze documentatie [https://rijkshuisstijl-community.vercel.app/?path=/docs/rhc-icon--docs]

Installatie

pnpm add @rijkshuisstijl-community/icon-react

Gebruik

Dit component kan op verschillende manieren worden gebruikt. Hieronder staan de verschillende manieren beschreven, beginnend met de makkelijkste manier.

**Standaard is er de optie om een icon property mee te geven met dit component, wat staat voor een van de ondersteunde icon IDs uit de icon set van de Rijkshuisstijl Community.

import { Icon } from '@rijkshuisstijl-community/icon-react';

<Icon icon="home" />;

**Als tweede optie is het mogelijk om een SVG element/React Node mee te geven, dit hoeft dus geen icoon uit een icon set te zijn.

import { Icon } from from '@rijkshuisstijl-community/icon-react';
import { IconBrandX } from '@tabler/icons-react';

<Icon><IconBrandX /></Icon>

Testing

We bundelen de CSS direct mee met de componenten zodat je dit niet apart hoeft in te laden. Let wel op met unit tests die in de Node omgeving draaien: die ondersteunen niet altijd standaard .css files. Voor vitest moet je bijvoorbeeld pool: 'vmThreads', aanzetten in de config als je de volgende error tegenkomt: TypeError: Unknown file extension ".css"

Rijkshuisstijl Community Componenten

Direct aan de slag met CSS | React | Web Components | Twig