--- url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/developpement/jeux-d-icones' title: 'Jeux d’icônes personnalisés | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:00:58+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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 : 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-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Jeux d’icônes personnalisés' description: |- 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 : image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:00:58+0000' dateModified: '2026-10-24T17:19:22+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/fr/hc/documentation/apprendre-dxpr-builder/developpement/jeux-d-icones' articleSection: 'Développer dessus' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/developpement/jeux-d-icones' description: |- 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 : breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Accueil item: 'https://dxpr.com/fr' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: fr --- [Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Étendre](/fr/hc/documentation/learn-dxpr-builder/extend) /[Développer dessus](/fr/hc/documentation/learn-dxpr-builder/extend/build-on-it) # Jeux d’icônes personnalisés. Apprendre DXPR BuilderÉtendreDévelopper dessus ## Dans ce guide 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 : ```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' ``` 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 : ```yaml 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 : ```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'], ]; } } ``` Voir [Référence de l’API des hooks](/fr/hc/documentation/apprendre-dxpr-builder/developpement/api-des-hooks) pour les autres hooks. ## Retirer des jeux intégrés ```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']); } ``` ## Vérifier votre jeu 1. Videz le cache : `drush cr`. 2. Ouvrez une page dans le builder et ajoutez un élément Icon. 3. Ouvrez le sélecteur d’icônes et choisissez votre jeu dans le menu déroulant. 4. Choisissez une icône, enregistrez, et voyez la page en visiteur pour confirmer que l’icône s’affiche.