@gemeenteleiden/icons

De iconenset van Gemeente Leiden voor de multisiteomgeving. Het package combineert iconen uit meerdere bronnen in één set met één formaat.

| Bron (source) | Welke iconen | Licentie | | --- | --- | --- | | material-symbols | Material Symbols (Sharp, weight 300, zonder fill): alleen de iconen in icons.json | Apache-2.0 | | opengemeenten | OpenGemeenten Iconenset: alle iconen van de release en variant in source.json | CC0-1.0 | | custom | Maatwerk: alle SVG's in src/sources/custom/svg/ en svg-multicolor/ | — |

Installeren

npm install @gemeenteleiden/icons

Gebruik

import { icons } from '@gemeenteleiden/icons';

// icons: { value, label, source, multicolor, viewBox, nodes }[]

• value is de unieke naam van het icoon, in snake_case (bijvoorbeeld arrow_right_alt of afval_gft).
• viewBox verschilt per bron (Material Symbols 0 -960 960 960, OpenGemeenten 0 0 48 48). Neem hem dus altijd over van het icoon zelf.
• nodes is de inhoud van het <svg>-element als boom ({ tag, attrs, children? }), met SVG-attribuutnamen zoals fill-rule. Daarmee bouw je het icoon in elk framework op, zonder innerHTML.

Het package bevat:

| Pad | Inhoud | | --- | --- | | @gemeenteleiden/icons | ESM- en CommonJS-module met icons, plus TypeScript-types (IconName, IconSource, Icon) | | @gemeenteleiden/icons/icons.json | Dezelfde gegevens als JSON, bijvoorbeeld om in PHP te lezen | | @gemeenteleiden/icons/svg/<naam>.svg | Losse SVG-bestanden, bijvoorbeeld voor de WordPress Icon API |

Iconen kleuren mee met currentColor, behalve als multicolor true is (zoals bij het DigiD-logo). Die houden hun eigen kleuren. Attributen die bepalen hoe een icoon getekend wordt (zoals fill="none" en stroke bij lijn-iconen) staan nooit op het <svg>-element zelf, maar op de vormen daarbinnen. Je kunt dus veilig je eigen fill, class of style op <svg> zetten.

Compatibel met de WordPress Icon API

Elk icoon is een platte lijst vormen met alleen de elementen en attributen die de WordPress Icon API toelaat:

• Elementen: path, rect, circle of polygon.
• Attributen: fill, fill-rule, clip-rule, stroke*, transform, en de geometrie van de vorm.

WordPress haalt al het andere weg met kses, maar laat de inhoud van verwijderde elementen staan. De vorm uit een <clipPath> wordt dan zichtbaar en kan het icoon bedekken.

De build zet een icoon daarom automatisch om:

• <g> wordt platgeslagen: de attributen gaan naar de vormen erin.
• <line>, <polyline> en <ellipse> worden een <path>.
• Een clip-path die niets wegsnijdt, zoals de frame-clip die Figma bij elke export toevoegt, wordt verwijderd.

Iconen toevoegen

Material Symbols: voeg het icoon toe aan src/sources/material-symbols/icons.json. De naam vind je op fonts.google.com/icons.

{ "value": "arrow_forward", "label": "Arrow Forward" }

label is optioneel. Met name kun je een icoon onder een andere naam opnemen dan in Material Symbols.

OpenGemeenten: alle iconen worden automatisch opgenomen. Naar een nieuwe release overstappen:

npm run sync:opengemeenten -- 5.2.0

Het script downloadt de release van GitHub en vervangt src/sources/opengemeenten/svg/. Het werkt ook source.json en LICENSE.md bij. Commit die wijzigingen. De iconen staan bewust in deze repository, omdat de Iconenset niet als actueel npm-package beschikbaar is. Zo bouwt het package altijd met precies dezelfde iconen. De variant (Line, Regular, Fill of Regular diapositive) stel je in via variant in source.json, waarna je de sync opnieuw draait. Namen worden van PascalCase naar snake_case omgezet (AfvalbakPMD wordt afvalbak_pmd). Het label komt uit de <title> van de SVG.

Maatwerk: zet een SVG, bijvoorbeeld een export uit Figma, in een van deze twee mappen:

| Map | Voor | Kleuren | | --- | --- | --- | | src/sources/custom/svg/ | éénkleurige iconen | worden currentColor | | src/sources/custom/svg-multicolor/ | logo's en andere meerkleurige iconen | blijven behouden |

De bestandsnaam wordt de naam van het icoon, in kleine letters (DigiD.svg wordt digid). Het label komt uit de <title> of anders uit de bestandsnaam (DigiD). De SVG wordt opgeschoond met SVGO en omgezet naar het formaat hierboven.

Draai daarna npm run build. De build stopt met een lijst van alle problemen als een icoon:

• niet bestaat in de bron;
• een naam heeft die al door een andere bron wordt gebruikt;
• een ongeldige naam heeft (alleen kleine letters, cijfers en _ zijn toegestaan);
• geen viewBox heeft;
• iets anders bevat dan vormen en groepen (g, path, circle, ellipse, line, polygon, polyline, rect). Verlopen, maskers, afbeeldingen, scripts, stijlen, links en event-attributen worden geweigerd;
• een clip-path heeft die echt iets wegsnijdt. Maak de clip in het ontwerpprogramma plat, in Figma met Flatten of Outline stroke;
• attributen heeft die de WordPress Icon API niet ondersteunt, zoals opacity op een groep.

Een bron toevoegen

1. Maak een map in src/sources/ met een index.js:

   export default {
     id: 'mijn-bron',          // wordt `source` op elk icoon
     optimize: true,           // opschonen met SVGO (false als de bron al schoon is)
     location: 'beschrijving', // voor foutmeldingen
     list: () => [{ value: 'naam', label: 'Label', file: '/absoluut/pad.svg' }],
   };

   list() bepaalt welke iconen worden opgenomen: een eigen lijst, zoals bij material-symbols, of alles uit een map met listSvgDirectory() uit utils.js, zoals bij opengemeenten en custom.
2. Registreer de bron in src/sources/index.js.
3. Vermeld de licentie in de tabel hierboven en in license in package.json.

Publiceren

npm version <patch|minor|major>
npm publish

prepack bouwt en controleert de set automatisch vóór elke publicatie.

Licentie

• Material Symbols: © Google, Apache License 2.0.
• OpenGemeenten Iconenset: CC0 1.0.