OpenGemeenten iconenset voor NL Design System

Gebruik iconen in HTML

Gebruik de custom element van de icoon om snel aan de slag te gaan:

<opengemeenten-icon-aanmelden></opengemeenten-icon-aanmelden>

De custom element voor de icoon werkt pas als je de JavaScript toevoegt, die helpt om alleen de iconen te downloaden die op de pagina worden gebruikt.

<script
  src="https://unpkg.com/@opengemeenten/iconset-web-component/dist/esm/icons.js"
  type="module">
</script>

Gebruik iconen in front-end frameworks

Installeer de iconenset via npm, het pakketje is: @opengemeenten/iconset-web-component.

npm install --save-dev @opengemeenten/iconset-web-component

React (bijvoorbeeld Gatsby.js, Next.js)

Installeer beide pakketjes zodat je de iconen hebt, en het pakketje met React componenten zodat de code weet welke iconen allemaal bestaan.

npm install --save-dev @opengemeenten/iconset-web-component
npm install --save-dev @opengemeenten/iconset-react

Voeg daarna de iconen toe aan je code, bijvoorbeeld zo:

import React from "react";
import { OpengemeentenIconActueel } from "@opengemeenten/iconset-react";

export const App = () => {
  return <OpengemeentenIconActueel />
}

Visueel ontwerp instellen: kleur en formaat

Om je ontwerp te kiezen kun je CSS custom properties gebruiken. Je kunt bijvoorbeeld zelf een class name maken voor een bepaald soort icoon:

.my-large-icon {
  --opengemeenten-icon-size: 4.2rem;
  --opengemeenten-icon-color: rgb(15, 73, 189);
}

Noem je eigen class name in de HTML bij je icoon:

<opengemeenten-icon-aanmelden class="my-large-icon">
</opengemeenten-icon-aanmelden>

Je kunt ook alle iconen binnen een bepaalde context een ontwerp meegeven, bijvoorbeeld iconen in een button:

button {
  --opengemeenten-icon-size: 1.5rem;
  --opengemeenten-icon-color: rgb(15, 73, 189);
}

Alle iconen uit deze iconenset krijgen dan automatisch het goede ontwerp, als ze in een button zijn geplaatst:

<button>
  <opengemeenten-icon-gebruikersvraag>
  </opengemeenten-icon-gebruikersvraag>
  Stel nu een vraag
</button>

Toegankelijkheid

Als je een button maakt die alleen een icoon bevat, en geen zichtbare tekst, dan moet je ook een label toevoegen aan de button. Bijvoorbeeld:

<button aria-label="Stel nu een vraag">
  <opengemeenten-icon-gebruikersvraag>
  </opengemeenten-icon-gebruikersvraag>
</button>