Eigene Icon-Sets.

Learn DXPR BuilderManage the siteDrupal-functies koppelen

Der Icon-Picker bietet 14 eingebaute Icon-Sets. Eigene fügen Sie mit einer YAML-Datei in Ihrem Modul oder Theme hinzu oder ändern die Liste mit einem Alter-Hook. Das Modul führt jede gefundene *.dxpr_icon_sets.yml-Datei in aktivierten Modulen und Themes zusammen und ruft dann den Hook auf.

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 einschränken, welche Sets die Redaktion sieht (Icon sets auf dem Profilformular).

YAML-Discovery (empfohlen)

Erstellen Sie mymodule.dxpr_icon_sets.yml im 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 verwendet
`prefix`	Ja	CSS-Klassenpräfix, das Icons dieses Sets kennzeichnet
`css`	Ja	Stylesheet, das der Editor lädt; ein relativer Pfad wird vom Root Ihres Moduls oder Themes aufgelöst
`library`	Ja	Drupal-Library, die für Besucher eingebunden wird, wenn gespeicherte Inhalte dieses Set nutzen
`icon_prefix`	Nein	Präfix des Icon-Namens, wenn es von `prefix` abweicht, wie in `fas fa-heart`
`icons`	Ja*	Vollständige Liste der Icon-Klassen

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

Drupal-Library-Definition

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

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

Das Modul bindet eine Library mit einem / im Namen nur ein, wenn sie die library eines registrierten Icon-Sets ist.

Alter-Hook

Für Laufzeitlogik, etwa um ein Set nur unter einer Bedingung hinzuzufügen, implementieren Sie hook_dxpr_builder_icon_sets_alter(). Der Hook läuft, nachdem YAML-Pfade aufgelöst wurden; geben Sie css daher einen Pfad ab dem Drupal-Root an:

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

Ihr Set prüfen

Leeren Sie den Cache: drush cr.
Öffnen Sie eine Seite im Builder und fügen Sie ein Icon-Element hinzu.
Öffnen Sie den Icon-Picker und wählen Sie Ihr Set im Dropdown.
Wählen Sie ein Icon, speichern Sie und betrachten Sie die Seite als Besucher, um zu bestätigen, dass das Icon rendert.