Własne zestawy ikon.

Learn DXPR BuilderExtendBouw erop voort

Wybierak ikon oferuje 14 wbudowanych zestawów ikon. Własny dodasz plikiem YAML w module albo motywie albo zmienisz listę hookiem alter. Moduł scala każdy znaleziony plik *.dxpr_icon_sets.yml we włączonych modułach i motywach, potem uruchamia hooka.

Wbudowane zestawy

Z dxpr_builder.dxpr_icon_sets.yml:

Klucz	Etykieta	Prefiks
`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`

Profil kreatora może ograniczyć zestawy widziane przez jego redaktorów (Icon sets w formularzu profilu).

Wykrywanie YAML (zalecane)

Utwórz mymodule.dxpr_icon_sets.yml w głównym katalogu modułu albo motywu:

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'

Zestaw z tym samym kluczem co wcześniejszy zastępuje go.

Właściwości

Właściwość	Wymagana	Opis
`label`	Tak	Nazwa w liście zestawów ikon; przy braku używany jest klucz
`prefix`	Tak	Prefiks klas CSS identyfikujący ikony tego zestawu
`css`	Tak	Arkusz stylów wczytywany przez edytor; ścieżka względna rozwiązywana jest z głównego katalogu modułu albo motywu
`library`	Tak	Biblioteka Drupala dołączana dla odwiedzających, gdy zapisana treść używa tego zestawu
`icon_prefix`	Nie	Prefiks nazwy ikony, gdy różni się od `prefix`, jak w `fas fa-heart`
`icons`	Tak*	Pełna lista klas ikon

*Wbudowane zestawy pomijają icons; edytor ma ich listy w JavaScript. Własny zestaw musi wypisać każdą ikonę.

Definicja biblioteki Drupala

Zarejestruj arkusz stylów jako bibliotekę w mymodule.libraries.yml, aby odwiedzający dostali go na stronach używających twoich ikon:

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

Moduł dołącza bibliotekę z / w nazwie tylko, gdy jest ona library zarejestrowanego zestawu ikon.

Hook alter

Do logiki runtime, na przykład dodania zestawu tylko pod pewnym warunkiem, zaimplementuj hook_dxpr_builder_icon_sets_alter(). Hook działa po rozwiązaniu ścieżek YAML, więc nadaj css ścieżkę od głównego katalogu Drupala:

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

Zobacz dokumentację hooków API dla pozostałych hooków.

Usuwanie wbudowanych zestawów

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

Sprawdzenie zestawu

Wyczyść pamięć podręczną: drush cr.
Otwórz stronę w kreatorze i dodaj element Icon.
Otwórz wybierak ikon i wybierz swój zestaw na liście.
Wybierz ikonę, zapisz i obejrzyj stronę jako odwiedzający, aby potwierdzić renderowanie ikony.