مجموعات الأيقونات المخصصة.

تعلّم DXPR Builderالتوسعةالبناء عليه

يعرض منتقي الأيقونات 14 مجموعة أيقونات مدمجة. وتضيفون مجموعتكم بملف YAML في وحدتكم أو قالبكم، أو تغيّرون القائمة بخطاف تعديل. فيدمج DXPR Builder كل ملف *.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`

يستطيع ملف المنشئ تقييد المجموعات التي يراها محرّروه (مجموعات الأيقونات في نموذج الملف).

اكتشاف 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 الخاصة بمجموعة أيقونات مسجلة.

خطاف التعديل

لمنطق زمن التشغيل، مثل إضافة مجموعة فقط تحت شرط ما، نفّذوا 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'],
    ];
  }
}

انظر مرجع واجهة الخطافات للخطافات الأخرى.

إزالة المجموعات المدمجة

/**
 * 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.
افتحوا صفحة في المنشئ وأضيفوا عنصر أيقونة.
افتحوا منتقي الأيقونات واختاروا مجموعتكم في القائمة المنسدلة.
اختاروا أيقونة واحفظوا وشاهدوا الصفحة كزائر للتأكد من عرض الأيقونة.