--- url: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D1%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B0/%D0%BD%D0%B0%D0%B1%D0%BE%D1%80%D0%B8-%D0%BF%D1%96%D0%BA%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D0%BC' title: 'Власні набори піктограм | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T20:00:15+00:00' updated: '2026-10-24T20:03:43+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Вибір піктограм пропонує 14 вбудованих наборів піктограм. Ви додаєте власний файлом YAML у своєму модулі або темі, або змінюєте список хуком alter. Модуль об’єднує кожен файл *.dxpr_icon_sets.yml, який знаходить в увімкнених модулях і темах, потім запускає хук. Вбудовані набори Із dxpr_builder.dxpr_icon_sets.yml: tags: - 'Build on it' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T20:03:43+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Власні набори піктограм' description: |- Вибір піктограм пропонує 14 вбудованих наборів піктограм. Ви додаєте власний файлом YAML у своєму модулі або темі, або змінюєте список хуком alter. Модуль об’єднує кожен файл *.dxpr_icon_sets.yml, який знаходить в увімкнених модулях і темах, потім запускає хук. Вбудовані набори Із dxpr_builder.dxpr_icon_sets.yml: image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T20:00:15+0000' dateModified: '2026-10-24T20:03:43+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D1%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B0/%D0%BD%D0%B0%D0%B1%D0%BE%D1%80%D0%B8-%D0%BF%D1%96%D0%BA%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D0%BC' articleSection: 'Розробка на платформі' - '@type': WebPage '@id': 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D1%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B0/%D0%BD%D0%B0%D0%B1%D0%BE%D1%80%D0%B8-%D0%BF%D1%96%D0%BA%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D0%BC' description: |- Вибір піктограм пропонує 14 вбудованих наборів піктограм. Ви додаєте власний файлом YAML у своєму модулі або темі, або змінюєте список хуком alter. Модуль об’єднує кожен файл *.dxpr_icon_sets.yml, який знаходить в увімкнених модулях і темах, потім запускає хук. Вбудовані набори Із dxpr_builder.dxpr_icon_sets.yml: breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/uk' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: uk --- [Help Center](/uk/hc)/[Documentation](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F) /[Вивчення DXPR Builder](/uk/hc/documentation/learn-dxpr-builder) /[Розширення](/uk/hc/documentation/learn-dxpr-builder/extend) /[Розробка на платформі](/uk/hc/documentation/learn-dxpr-builder/extend/build-on-it) # Власні набори піктограм. Вивчення DXPR BuilderРозширенняРозробка на платформі ## In this guide Вибір піктограм пропонує 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` у корені свого модуля або теми: ```yaml 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`, щоб відвідувачі отримували її на сторінках, які використовують ваші піктограми: ```yaml material_symbols: css: theme: vendor/material-symbols/material-symbols.css: {} ``` Модуль приєднує бібліотеку зі `/` в імені лише коли вона є `library` зареєстрованого набору піктограм. ## Хук alter Для логіки часу виконання, як-от додавання набору лише за певної умови, реалізуйте `hook_dxpr_builder_icon_sets_alter()`. Хук запускається після розв’язання шляхів YAML, тож дайте `css` шлях від кореня Drupal: ```php /** * 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](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D1%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B0/%D1%85%D1%83%D0%BA%D0%B8-api). ## Вилучення вбудованих наборів ```php /** * 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']); } ``` ## Перевірте свій набір 1. Очистьте кеш: `drush cr`. 2. Відкрийте сторінку в конструкторі й додайте елемент Icon. 3. Відкрийте вибір піктограм і виберіть свій набір у спадному списку. 4. Виберіть піктограму, збережіть і перегляньте сторінку як відвідувач, щоб підтвердити, що піктограма рендериться.