Jeux d’icônes personnalisés.

Apprendre DXPR BuilderÉtendreDévelopper dessus

Le sélecteur d’icônes propose 14 jeux d’icônes intégrés. Vous ajoutez le vôtre avec un fichier YAML dans votre module ou thème, ou changez la liste avec un hook de modification. Le module fusionne chaque fichier *.dxpr_icon_sets.yml trouvé dans les modules et thèmes activés, puis exécute le hook.

Jeux intégrés

Depuis dxpr_builder.dxpr_icon_sets.yml :

Clé	Libellé	Préfixe
`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`

Un profil du builder peut limiter les jeux vus par ses contributeurs (Icon sets sur le formulaire du profil).

Découverte YAML (recommandé)

Créez mymodule.dxpr_icon_sets.yml à la racine de votre module ou thème :

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'

Un jeu avec la même clé qu’un précédent le remplace.

Propriétés

Propriété	Requis	Description
`label`	Oui	Nom dans le menu déroulant des jeux d’icônes ; la clé est utilisée s’il manque
`prefix`	Oui	Préfixe de classe CSS qui identifie les icônes de ce jeu
`css`	Oui	Feuille de style chargée par l’éditeur ; un chemin relatif est résolu depuis la racine de votre module ou thème
`library`	Oui	Bibliothèque Drupal attachée pour les visiteurs quand le contenu enregistré utilise ce jeu
`icon_prefix`	Non	Préfixe du nom d’icône quand il diffère de `prefix`, comme dans `fas fa-heart`
`icons`	Oui*	Liste complète des classes d’icônes

*Les jeux intégrés omettent icons ; l’éditeur a leurs listes en JavaScript. Votre propre jeu doit lister chaque icône.

Définition de bibliothèque Drupal

Enregistrez la feuille de style comme bibliothèque dans mymodule.libraries.yml, pour que les visiteurs l’aient sur les pages qui utilisent vos icônes :

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

Le module n’attache une bibliothèque avec un / dans son nom que si elle est la library d’un jeu d’icônes enregistré.

Hook de modification

Pour de la logique d’exécution, comme ajouter un jeu seulement sous condition, implémentez hook_dxpr_builder_icon_sets_alter(). Le hook tourne après résolution des chemins YAML, donc donnez à css un chemin depuis la racine 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'],
    ];
  }
}

Voir Référence de l’API des hooks pour les autres hooks.

Retirer des jeux intégrés

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

Vérifier votre jeu

Videz le cache : drush cr.
Ouvrez une page dans le builder et ajoutez un élément Icon.
Ouvrez le sélecteur d’icônes et choisissez votre jeu dans le menu déroulant.
Choisissez une icône, enregistrez, et voyez la page en visiteur pour confirmer que l’icône s’affiche.