Власні набори піктограм.

Вивчення DXPR BuilderРозширенняРозробка на платформі

Вибір піктограм пропонує 14 вбудованих наборів піктограм. Ви додаєте власний файлом YAML у своєму модулі або темі, або змінюєте список хуком alter. Модуль об’єднує кожен файл *.dxpr_icon_sets.yml, який знаходить в увімкнених модулях і темах, потім запускає хук.

Вбудовані набори

Із dxpr_builder.dxpr_icon_sets.yml:

Ключ	Мітка	Префікс
`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`

Профіль конструктора може обмежити, які набори бачать його редактори (Icon sets на формі профілю).

Виявлення YAML (рекомендовано)

Створіть mymodule.dxpr_icon_sets.yml у корені свого модуля або теми:

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'

Набір із тим самим ключем, що й раніший, замінює його.

Властивості

Властивість	Обов’язково	Опис
`label`	Так	Назва у спадному списку наборів піктограм; ключ використовується, коли її немає
`prefix`	Так	Префікс CSS-класу, який ідентифікує піктограми цього набору
`css`	Так	Таблиця стилів, яку завантажує редактор; відносний шлях розв’язується від кореня вашого модуля або теми
`library`	Так	Бібліотека Drupal, приєднана для відвідувачів, коли збережений вміст використовує цей набір
`icon_prefix`	Ні	Префікс імені піктограми, коли він відрізняється від `prefix`, як у `fas fa-heart`
`icons`	Так*	Повний список класів піктограм

*Вбудовані набори опускають icons; редактор має їхні списки в JavaScript. Ваш власний набір мусить перелічити кожну піктограму.

Визначення бібліотеки Drupal

Зареєструйте таблицю стилів як бібліотеку в mymodule.libraries.yml, щоб відвідувачі отримували її на сторінках, які використовують ваші піктограми:

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

Модуль приєднує бібліотеку зі / в імені лише коли вона є library зареєстрованого набору піктограм.

Хук alter

Для логіки часу виконання, як-от додавання набору лише за певної умови, реалізуйте hook_dxpr_builder_icon_sets_alter(). Хук запускається після розв’язання шляхів YAML, тож дайте css шлях від кореня Drupal:

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

Інші хуки див. у Довіднику Hooks API.

Вилучення вбудованих наборів

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

Перевірте свій набір

Очистьте кеш: drush cr.
Відкрийте сторінку в конструкторі й додайте елемент Icon.
Відкрийте вибір піктограм і виберіть свій набір у спадному списку.
Виберіть піктограму, збережіть і перегляньте сторінку як відвідувач, щоб підтвердити, що піктограма рендериться.