Бібліотеки піктограм.

Вивчення DXPR BuilderКерування сайтомАдаптація під бренд

Вибір піктограм в елементах Icon і Circle counter пропонує кожен набір піктограм, зареєстрований на вашому сайті. DXPR Builder постачає 14 наборів; модулі та теми можуть додати більше файлом YAML. Ця сторінка перелічує вбудовані набори, пояснює, як вони завантажуються, і показує вам, як додати один. Щоб обмежити набори, які бачить роль, використайте профіль конструктора; див. Профілі користувачів.

Вбудовані набори піктограм

Набори зареєстровано в dxpr_builder.dxpr_icon_sets.yml:

Ключ	Мітка у виборі	Префікс класу	Бібліотека
`bi`	Bootstrap Icons	`bi`	`dxpr_builder/elements.bootstrap_icons`
`et`	ET Line Icons	`et`	`dxpr_builder/elements.et_line_font`
`fab`	Font Awesome Free Brands	`fab`	`dxpr_builder/elements.font_awesome_6_free`
`far`	Font Awesome Free Regular	`far`	`dxpr_builder/elements.font_awesome_6_free`
`fas`	Font Awesome Free Solid	`fas`	`dxpr_builder/elements.font_awesome_6_free`
`glyphicon`	Glyphicon Halflings	`glyphicon`	`dxpr_builder/elements.glyphicons_halflings`
`pe`	Pixeden Line Icons	`pe`	`dxpr_builder/elements.pe_icon_7_stroke`
`ph`	Phosphor Icons Regular	`ph`	`dxpr_builder/elements.phosphor_icons`
`ph_bold`	Phosphor Icons Bold	`ph-bold`	`dxpr_builder/elements.phosphor_icons_bold`
`ph_duotone`	Phosphor Icons Duotone	`ph-duotone`	`dxpr_builder/elements.phosphor_icons_duotone`
`ph_fill`	Phosphor Icons Fill	`ph-fill`	`dxpr_builder/elements.phosphor_icons_fill`
`ph_light`	Phosphor Icons Light	`ph-light`	`dxpr_builder/elements.phosphor_icons_light`
`ph_thin`	Phosphor Icons Thin	`ph-thin`	`dxpr_builder/elements.phosphor_icons_thin`
`fa`	Font Awesome (v4 compatibility)	`fa`	`dxpr_builder/elements.font_awesome_6_free`

Вибір не пропонує набір fa, бо він не має списку піктограм. Він змушує піктограми, збережені зі старим класом fa, завантажувати бібліотеку Font Awesome. Сторінки, збережені зі старими іменами бібліотек Font Awesome, також отримують таблицю стилів dxpr_builder/elements.font_awesome_v4_shims, тож їхні піктограми продовжують показуватися.

Усі набори Font Awesome завантажують Font Awesome Free 7. Бібліотека зберігає машинне ім’я версії 6, бо збережені сторінки та власний код посилаються на нього. Що змінилося, перелічує сторінка Font Awesome 7 у DXPR Builder.

Як вибір і сторінки завантажують піктограми

Спадний список наборів починається з All icon sets, потім перелічує кожен зареєстрований набір, який має список піктограм. 13 вбудованих наборів, крім fa, мають вбудовані списки, тож сайт лише з DXPR Builder показує 14 записів. Набір з іншого модуля або теми потребує списку icons у своєму YAML, щоб з’явитися.

Коли редактор вибирає піктограму, елемент зберігає класи піктограми, як-от bi bi-star, та ім’я її бібліотеки. Відвідувачі потім завантажують лише шрифти піктограм, які використовує їхня сторінка. У редакторі ET Line, Pixeden і Glyphicon завантажуються з самим редактором; вибір завантажує таблиці стилів інших наборів, коли відкривається.

Як редактори вибирають і стилізують піктограму, наведено на сторінці Додавання піктограми.

Обмеження наборів піктограм для кожної ролі

Кожен профіль конструктора має групу Icon sets із полем на набір і полем Check/Uncheck all Icon sets. Налаштуйте її в DXPR Studio > DXPR Builder > User Profiles; кроки має сторінка Профілі користувачів. Як поводиться група:

З позначеним Check/Uncheck all Icon sets роль бачить кожен набір, включно з наборами, доданими пізніше.
Зі знятою позначкою роль бачить лише позначені набори. Новий профіль починається так, з кожним набором позначеним, тож доданий пізніше набір лишається прихованим, доки ви його не позначите.
Зі знятою позначкою і без позначених наборів вибір порожній.
Піктограми, які вже є на сторінці, продовжують показуватися. Профіль змінює лише те, що пропонує вибір.

Додавання набору піктограм

Набір піктограм це запис YAML плюс бібліотека Drupal. DXPR Builder читає *.dxpr_icon_sets.yml з кожного встановленого модуля та теми. Довідник властивостей і хук alter наведено на сторінці Власні набори піктограм.

Створіть mymodule/mymodule.dxpr_icon_sets.yml:
```
brand:
  label: 'Brand icons'
  prefix: brand
  css: css/brand-icons.css
  library: mymodule/brand_icons
  icons:
    - 'brand brand-logo'
    - 'brand brand-arrow'
```
css відносний до теки модуля й завантажується в редакторі. Кожна піктограма це префікс плюс клас, що починається з префікса та дефіса.
Заявіть бібліотеку в mymodule.libraries.yml. Сторінки відвідувачів її завантажують:
```
brand_icons:
  css:
    theme:
      css/brand-icons.css: {}
```
Очистьте кеші через drush cr.
Позначте новий набір у кожному профілі конструктора, який не має позначеного Check/Uncheck all Icon sets.
Відкрийте налаштування елемента Icon і виберіть Brand icons у спадному списку наборів.

Власний модуль також може вилучити набір із вибору хуком alter; код наведено в Довіднику Hooks API. Піктограми з вбудованого набору все одно продовжують завантажуватися на збережених сторінках. Піктограми з вилученого власного набору припиняють завантажувати свій CSS, бо DXPR Builder приєднує лише бібліотеку, яку називає зареєстрований набір.

Якщо набору піктограм бракує

Нового набору немає у спадному списку. Його YAML не має списку icons, або кеш досі тримає старий реєстр. Додайте список і виконайте drush cr.
Набору бракує лише деяким редакторам. Їхній профіль конструктора його не позначає. Позначте його в Icon sets за шляхом /admin/dxpr_studio/dxpr_builder/profile.
Піктограми показуються в редакторі, але не відвідувачам. Редактор завантажує файл css набору, але сторінки відвідувачів завантажують його library. Переконайтеся, що library називає бібліотеку в mymodule.libraries.yml, яка містить файл CSS.

Що далі?

Власні набори піктограм: довідник властивостей YAML і хук alter.
Додавання піктограми: налаштування елемента Icon.