Eigene Icon-Sets.

Learn DXPR BuilderExtendBouw erop voort

Die Icon-Auswahl bietet 14 eingebaute Icon-Sets. Eigene fügen Sie per YAML-Datei in Ihrem Modul oder Theme hinzu, oder ändern die Liste per Alter-Hook. Das Modul mergt jede gefundene *.dxpr_icon_sets.yml-Datei in aktivierten Modulen und Themes und führt dann den Hook aus.

Eingebaute Sets

Aus dxpr_builder.dxpr_icon_sets.yml:

Schlüssel	Bezeichnung	Präfix
`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`

Ein Builder-Profil kann begrenzen, welche Sets seine Bearbeitenden sehen (Icon sets auf dem Profilformular).

YAML-Erkennung (empfohlen)

Erstellen Sie mymodule.dxpr_icon_sets.yml in der Root Ihres Moduls oder Themes:

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'

Ein Set mit demselben Schlüssel wie ein früheres ersetzt es.

Eigenschaften

Eigenschaft	Erforderlich	Beschreibung
`label`	Ja	Name im Icon-Set-Dropdown; bei Fehlen wird der Schlüssel genutzt
`prefix`	Ja	CSS-Klassenpräfix, das Icons dieses Sets kennzeichnet
`css`	Ja	Stylesheet, das der Editor lädt; ein relativer Pfad wird ab Modul- oder Theme-Root aufgelöst
`library`	Ja	Drupal-Bibliothek, die für Besuchende angehängt wird, wenn gespeicherte Inhalte dieses Set nutzen
`icon_prefix`	Nein	Präfix des Icon-Namens, wenn er von `prefix` abweicht, wie in `fas fa-heart`
`icons`	Ja*	Volle Liste der Icon-Klassen

*Die eingebauten Sets lassen icons weg; der Editor hat ihre Listen in JavaScript. Ihr eigenes Set muss jedes Icon listen.

Drupal-Bibliotheksdefinition

Registrieren Sie das Stylesheet als Bibliothek in mymodule.libraries.yml, damit Besuchende es auf Seiten erhalten, die Ihre Icons nutzen:

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

Das Modul hängt eine Bibliothek mit / im Namen nur an, wenn sie die library eines registrierten Icon-Sets ist.

Alter-Hook

Für Lauflogik, etwa ein Set nur unter einer Bedingung hinzuzufügen, implementieren Sie hook_dxpr_builder_icon_sets_alter(). Der Hook läuft nach Auflösung der YAML-Pfade, geben Sie css daher einen Pfad ab 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'],
    ];
  }
}

Siehe Hooks-API-Referenz für die übrigen Hooks.

Eingebaute Sets entfernen

/**
 * 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']);
}

Set prüfen

Cache leeren: drush cr.
Seite im Builder öffnen und Icon-Element hinzufügen.
Icon-Auswahl öffnen und Ihr Set im Dropdown wählen.
Icon wählen, speichern und die Seite in einem privaten Browserfenster betrachten, um zu bestätigen, dass das Icon rendert.