Pictogrambibliotheken.

DXPR Builder lerenDe site beherenJe huisstijl toepassen

De pictogramkiezer in de elementen Pictogram en Cirkelteller biedt elke op je site geregistreerde pictogrammenset. DXPR Builder levert 14 sets mee; modules en thema's kunnen er meer toevoegen met een YAML-bestand. Deze pagina somt de meegeleverde sets op, legt uit hoe ze laden en toont hoe je er een toevoegt. Om de sets te beperken die een rol ziet, gebruik je een builderprofiel; zie Gebruikersprofielen.

Meegeleverde pictogrammensets

De sets zijn geregistreerd in dxpr_builder.dxpr_icon_sets.yml:

Sleutel	Label in de kiezer	Klasseprefix	Library
`bi`	Bootstrap Icons	`bi`	`dxpr_builder/elements.bootstrap_icons`
`et`	ET Line Icons	`et`	`dxpr_builder/elements.et_line_font`
`fab`	Font Awesome Free Brands	`fab`	`dxpr_builder/elements.font_awesome_6_free`
`far`	Font Awesome Free Regular	`far`	`dxpr_builder/elements.font_awesome_6_free`
`fas`	Font Awesome Free Solid	`fas`	`dxpr_builder/elements.font_awesome_6_free`
`glyphicon`	Glyphicon Halflings	`glyphicon`	`dxpr_builder/elements.glyphicons_halflings`
`pe`	Pixeden Line Icons	`pe`	`dxpr_builder/elements.pe_icon_7_stroke`
`ph`	Phosphor Icons Regular	`ph`	`dxpr_builder/elements.phosphor_icons`
`ph_bold`	Phosphor Icons Bold	`ph-bold`	`dxpr_builder/elements.phosphor_icons_bold`
`ph_duotone`	Phosphor Icons Duotone	`ph-duotone`	`dxpr_builder/elements.phosphor_icons_duotone`
`ph_fill`	Phosphor Icons Fill	`ph-fill`	`dxpr_builder/elements.phosphor_icons_fill`
`ph_light`	Phosphor Icons Light	`ph-light`	`dxpr_builder/elements.phosphor_icons_light`
`ph_thin`	Phosphor Icons Thin	`ph-thin`	`dxpr_builder/elements.phosphor_icons_thin`
`fa`	Font Awesome (v4 compatibility)	`fa`	`dxpr_builder/elements.font_awesome_6_free`

De kiezer biedt de set fa niet aan, omdat die geen pictogrammenlijst heeft. Die zorgt dat pictogrammen bewaard met de oude fa-klasse de Font Awesome-library laden. Pagina's bewaard met de oude Font Awesome-librarynamen krijgen ook de stylesheet dxpr_builder/elements.font_awesome_v4_shims, zodat hun pictogrammen blijven tonen.

Alle Font Awesome-sets laden Font Awesome Free 7. De library behoudt zijn versie-6-machinenaam, omdat bewaarde pagina's en aangepaste code ernaar verwijzen. Font Awesome 7 in DXPR Builder somt op wat is gewijzigd.

Hoe de kiezer en pagina's pictogrammen laden

De setdropdown begint met All icon sets en somt daarna elke geregistreerde set met een pictogrammenlijst op. De 13 meegeleverde sets behalve fa hebben ingebouwde lijsten, dus een site met alleen DXPR Builder toont 14 vermeldingen. Een set van een andere module of een ander thema heeft een icons-lijst in zijn YAML nodig om te verschijnen.

Wanneer een redacteur een pictogram kiest, slaat het element de klassen van het pictogram op, zoals bi bi-star, en de naam van zijn library. Bezoekers downloaden daarna alleen de pictogramlettertypen die hun pagina gebruikt. In de editor laden ET Line, Pixeden en Glyphicon met de editor zelf; de kiezer laadt de stylesheets van de andere sets wanneer hij opent.

Hoe redacteurs een pictogram kiezen en stijlen staat op Een pictogram toevoegen.

Pictogrammensets per rol beperken

Elk builderprofiel heeft een groep Icon sets met een vak per set en een vak Check/Uncheck all Icon sets. Stel hem in bij DXPR Studio > DXPR Builder > User Profiles; Gebruikersprofielen heeft de stappen. Hoe de groep zich gedraagt:

Met Check/Uncheck all Icon sets aangevinkt ziet de rol elke set, inclusief later toegevoegde sets.
Zonder vinkje ziet de rol alleen de aangevinkte sets. Een nieuw profiel begint zo, met elke set aangevinkt, dus een later toegevoegde set blijft verborgen totdat je hem aanvinkt.
Zonder vinkje en zonder aangevinkte set is de kiezer leeg.
Pictogrammen die al op een pagina staan blijven tonen. Het profiel wijzigt alleen wat de kiezer biedt.

Een pictogrammenset toevoegen

Een pictogrammenset is een YAML-vermelding plus een Drupal-library. DXPR Builder leest *.dxpr_icon_sets.yml uit elke geïnstalleerde module en elk thema. De eigenschappenreferentie en de alter hook staan op Aangepaste pictogrammensets.

Maak mymodule/mymodule.dxpr_icon_sets.yml:
```
brand:
  label: 'Brand icons'
  prefix: brand
  css: css/brand-icons.css
  library: mymodule/brand_icons
  icons:
    - 'brand brand-logo'
    - 'brand brand-arrow'
```
css is relatief ten opzichte van de moduleremap en laadt in de editor. Elk pictogram is de prefix plus een klasse die begint met de prefix en een koppelteken.
Declareer de library in mymodule.libraries.yml. Pagina's van bezoekers laden hem:
```
brand_icons:
  css:
    theme:
      css/brand-icons.css: {}
```
Wis de caches met drush cr.
Vink de nieuwe set aan in elk builderprofiel dat Check/Uncheck all Icon sets niet heeft aangevinkt.
Open de instellingen van een Pictogram-element en kies Brand icons in de setdropdown.

Een aangepaste module kan ook een set uit de kiezer verwijderen met een alter hook; de code staat op Hooks API-referentie. Pictogrammen uit een meegeleverde set blijven toch laden op bewaarde pagina's. Pictogrammen uit een verwijderde aangepaste set stoppen met het laden van hun CSS, omdat DXPR Builder alleen een library koppelt die een geregistreerde set noemt.

Als een pictogrammenset ontbreekt

Een nieuwe set staat niet in de dropdown. Zijn YAML heeft geen icons-lijst, of de cache bevat nog het oude register. Voeg de lijst toe en draai drush cr.
Een set ontbreekt alleen voor sommige redacteurs. Hun builderprofiel vinkt hem niet aan. Vink hem aan onder Icon sets op /admin/dxpr_studio/dxpr_builder/profile.
Pictogrammen tonen in de editor maar niet voor bezoekers. De editor laadt het css-bestand van de set, maar pagina's van bezoekers laden zijn library. Zorg dat library een library in mymodule.libraries.yml noemt die het CSS-bestand bevat.

Wat nu?

Aangepaste pictogrammensets: de YAML-eigenschappenreferentie en de alter hook.
Een pictogram toevoegen: de instellingen van het Pictogram-element.