Bibliothèques d’icônes.

Apprendre DXPR BuilderGérer le siteAux couleurs de votre marque

Le sélecteur d’icônes des éléments Icon et Circle counter propose chaque jeu d’icônes enregistré sur votre site. DXPR Builder livre 14 jeux ; modules et thèmes peuvent en ajouter avec un fichier YAML. Cette page liste les jeux livrés, explique comment ils se chargent, et montre comment en ajouter un. Pour limiter les jeux vus par un rôle, utilisez un profil du builder ; voir Profils d’utilisateur.

Jeux d’icônes livrés

Les jeux sont enregistrés dans dxpr_builder.dxpr_icon_sets.yml :

Clé	Libellé dans le sélecteur	Préfixe de classe	Bibliothèque
`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`

Le sélecteur ne propose pas le jeu fa, car il n’a pas de liste d’icônes. Il fait charger aux icônes enregistrées avec l’ancienne classe fa la bibliothèque Font Awesome. Les pages enregistrées avec les anciens noms de bibliothèque Font Awesome reçoivent aussi la feuille de style dxpr_builder/elements.font_awesome_v4_shims, pour que leurs icônes continuent de s’afficher.

Tous les jeux Font Awesome chargent Font Awesome Free 7. La bibliothèque garde son nom machine de version 6, car les pages enregistrées et le code personnalisé s’y réfèrent. Font Awesome 7 dans DXPR Builder liste ce qui a changé.

Comment le sélecteur et les pages chargent les icônes

Le menu déroulant des jeux commence par All icon sets, puis liste chaque jeu enregistré qui a une liste d’icônes. Les 13 jeux livrés autres que fa ont des listes intégrées, donc un site avec DXPR Builder seul montre 14 entrées. Un jeu d’un autre module ou thème a besoin d’une liste icons dans son YAML pour apparaître.

Quand un contributeur choisit une icône, l’élément stocke les classes de l’icône, comme bi bi-star, et le nom de sa bibliothèque. Les visiteurs ne téléchargent alors que les polices d’icônes utilisées par leur page. Dans l’éditeur, ET Line, Pixeden et Glyphicon se chargent avec l’éditeur lui-même ; le sélecteur charge les feuilles de style des autres jeux à son ouverture.

Le choix et le style d’une icône par les contributeurs sont sur Ajouter une icône.

Limiter les jeux d’icônes par rôle

Chaque profil du builder a un groupe Icon sets avec une case par jeu et une case Check/Uncheck all Icon sets. Configurez-le sous DXPR Studio > DXPR Builder > User Profiles ; Profils d’utilisateur a les étapes. Fonctionnement du groupe :

Avec Check/Uncheck all Icon sets coché, le rôle voit chaque jeu, y compris les jeux ajoutés plus tard.
Sans la case cochée, le rôle ne voit que les jeux cochés. Un nouveau profil démarre ainsi, avec chaque jeu coché, donc un jeu ajouté plus tard reste masqué jusqu’à ce que vous le cochiez.
Sans la case cochée et sans jeu coché, le sélecteur est vide.
Les icônes déjà sur une page continuent de s’afficher. Le profil ne change que ce que le sélecteur propose.

Ajouter un jeu d’icônes

Un jeu d’icônes est une entrée YAML plus une bibliothèque Drupal. DXPR Builder lit *.dxpr_icon_sets.yml depuis chaque module et thème installé. La référence des propriétés et le hook de modification sont sur Jeux d’icônes personnalisés.

Créez 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 est relatif au dossier du module et se charge dans l’éditeur. Chaque icône est le préfixe plus une classe qui commence par le préfixe et un trait d’union.
Déclarez la bibliothèque dans mymodule.libraries.yml. Les pages des visiteurs la chargent :
```
brand_icons:
  css:
    theme:
      css/brand-icons.css: {}
```
Videz les caches avec drush cr.
Cochez le nouveau jeu dans chaque profil du builder qui n’a pas Check/Uncheck all Icon sets coché.
Ouvrez les réglages d’un élément Icon et choisissez Brand icons dans le menu déroulant des jeux.

Un module personnalisé peut aussi retirer un jeu du sélecteur avec un hook de modification ; le code est sur Référence de l’API des hooks. Les icônes d’un jeu livré continuent de se charger sur les pages enregistrées. Les icônes d’un jeu personnalisé retiré cessent de charger leur CSS, car DXPR Builder n’attache qu’une bibliothèque nommée par un jeu enregistré.

Si un jeu d’icônes manque

Un nouveau jeu n’est pas dans le menu déroulant. Son YAML n’a pas de liste icons, ou le cache garde l’ancien registre. Ajoutez la liste et exécutez drush cr.
Un jeu manque seulement chez certains contributeurs. Leur profil du builder ne le coche pas. Cochez-le sous Icon sets sous /admin/dxpr_studio/dxpr_builder/profile.
Les icônes s’affichent dans l’éditeur mais pas pour les visiteurs. L’éditeur charge le fichier css du jeu, mais les pages des visiteurs chargent sa library. Vérifiez que library nomme une bibliothèque dans mymodule.libraries.yml qui contient le fichier CSS.

Et ensuite ?

Jeux d’icônes personnalisés : la référence des propriétés YAML et le hook de modification.
Ajouter une icône : les réglages de l’élément Icon.