Aangepaste pictogrammensets.

Learn DXPR BuilderExtendBouw erop voort

De pictogramkiezer biedt 14 ingebouwde pictogrammensets. Je voegt je eigen toe met een YAML-bestand in je module of thema, of wijzigt de lijst met een alter hook. De module voegt elk *.dxpr_icon_sets.yml-bestand samen dat hij in ingeschakelde modules en thema's vindt, en draait daarna de hook.

Ingebouwde sets

Uit dxpr_builder.dxpr_icon_sets.yml:

Sleutel	Label	Prefix
`bi`	Bootstrap Icons	`bi`
`et`	ET Line Icons	`et`
`fa`	Font Awesome (v4 compatibility)	`fa`
`fab`	Font Awesome Free Brands	`fab`
`far`	Font Awesome Free Regular	`far`
`fas`	Font Awesome Free Solid	`fas`
`glyphicon`	Glyphicon Halflings	`glyphicon`
`pe`	Pixeden Line Icons	`pe`
`ph`	Phosphor Icons Regular	`ph`
`ph_bold`	Phosphor Icons Bold	`ph-bold`
`ph_duotone`	Phosphor Icons Duotone	`ph-duotone`
`ph_fill`	Phosphor Icons Fill	`ph-fill`
`ph_light`	Phosphor Icons Light	`ph-light`
`ph_thin`	Phosphor Icons Thin	`ph-thin`

Een builderprofiel kan beperken welke sets zijn redacteurs zien (Icon sets op het profielformulier).

YAML-discovery (aanbevolen)

Maak mymodule.dxpr_icon_sets.yml in de root van je module of thema:

material:
  label: 'Material Symbols'
  prefix: material-symbols
  css: vendor/material-symbols/material-symbols.css
  library: mymodule/material_symbols
  icons:
    - 'material-symbols material-symbols-star'
    - 'material-symbols material-symbols-home'
    - 'material-symbols material-symbols-search'

Een set met dezelfde sleutel als een eerdere vervangt die.

Eigenschappen

Eigenschap	Verplicht	Beschrijving
`label`	Ja	Naam in de dropdown met pictogrammensets; de sleutel wordt gebruikt wanneer die ontbreekt
`prefix`	Ja	CSS-klasseprefix die pictogrammen van deze set identificeert
`css`	Ja	Stylesheet die de editor laadt; een relatief pad wordt opgelost vanaf de root van je module of thema
`library`	Ja	Drupal-library gekoppeld voor bezoekers wanneer opgeslagen inhoud deze set gebruikt
`icon_prefix`	Nee	Prefix van de pictogramnaam wanneer die afwijkt van `prefix`, zoals in `fas fa-heart`
`icons`	Ja*	Volledige lijst met pictogramklassen

*De ingebouwde sets laten icons weg; de editor heeft hun lijsten in JavaScript. Je eigen set moet elk pictogram vermelden.

Drupal-librarydefinitie

Registreer de stylesheet als library in mymodule.libraries.yml, zodat bezoekers hem krijgen op pagina's die je pictogrammen gebruiken:

material_symbols:
  css:
    theme:
      vendor/material-symbols/material-symbols.css: {}

De module koppelt een library met een / in zijn naam alleen wanneer het de library is van een geregistreerde pictogrammenset.

Alter hook

Voor runtimelogica, zoals een set alleen onder een voorwaarde toevoegen, implementeer je hook_dxpr_builder_icon_sets_alter(). De hook draait nadat YAML-paden zijn opgelost, dus geef css een pad vanaf de Drupal-root:

/**
 * Implements hook_dxpr_builder_icon_sets_alter().
 */
function mymodule_dxpr_builder_icon_sets_alter(array &$icon_sets) {
  if (some_condition()) {
    $module_path = \Drupal::service('extension.list.module')
      ->getPath('mymodule');
    $icon_sets['custom'] = [
      'label' => t('Custom Icons'),
      'prefix' => 'ci',
      'css' => $module_path . '/css/custom-icons.css',
      'library' => 'mymodule/custom_icons',
      'icons' => ['ci ci-logo', 'ci ci-arrow'],
    ];
  }
}

Zie Hooks API-referentie voor de andere hooks.

Ingebouwde sets verwijderen

/**
 * Implements hook_dxpr_builder_icon_sets_alter().
 */
function mymodule_dxpr_builder_icon_sets_alter(array &$icon_sets) {
  // Remove ET Line Icons from the picker.
  unset($icon_sets['et']);
}

Je set controleren

Wis de cache: drush cr.
Open een pagina in de builder en voeg een Pictogram-element toe.
Open de pictogramkiezer en kies je set in de dropdown.
Kies een pictogram, sla op en bekijk de pagina als bezoeker om te bevestigen dat het pictogram rendert.