Pour faire suite à mon travail avec l'incroyable équipe de UI Patterns, un autre besoin est surgit pour utiliser Drupal et UI Patterns dans la gestion des Design System : les icônes 
!
Pourquoi des Icônes
Dans un Design System, on retrouve plusieurs artéfacts : Composants, Mise en page, Styles, Thèmes, Variables CSS, Pages exemples et bien sûr Icônes !
UI Patterns intègre déjà tous les autres artéfacts, il ne manquait que les icônes 
.
Après un peu de recherche écosystème 
Drupal ne propose pas beaucoup de modules générique pour pouvoir offrir la déclaration et gestion de packs d'icônes agnostique.
Il existe de bons modules, celui se rapprochant le plus du besoin étant Iconset. Malheureusement une dépendance à un sous module et la gestion plus rigide le rends difficile à utiliser pour UI Patterns.
Un nouveau module pour les rassembler tous
J'ai donc créer un module spécifique pour la gestion générique de packs d'icônes : UI Icons
La base est simple et proche d'Iconset, pouvoir déclarer un pack d'Icônes de façon déclarative dans un fichier 
YAML.
my_icons:
label: My icons
extractor: path
config:
sources:
- /librarires/my_icons/{icon_id}.svg
template: >
<img class="icon icon-{{ icon_id|clean_class }}" src="{{ source }}" width="24" height="24">Et voilà ! Les icônes svg seront disponibles pour être utilisable avec Drupal. Plusieurs sous modules permettent l'intégration avec Render API, Twig, CKEditor, les Champs, le Menu, UI Patterns ...
Le module propose de nombreux exemples avec les icônes les plus courant : 
Bootstrap, FontAwesome, Icomoon, Phosphor, Iconify... et plus encore.
De plus, pour apporter de la flexibilité au template, une clef settings permet de définir des variables qui seront accessible par l'utilisateur lors de la saisie et utilisable dans le template, par exemple:
settings:
width:
title: "Width"
description: "Set a width for this icon."
type: "integer"
default: 24
height:
title: "Height"
description: "Set a height for this icon."
type: "integer"
template: >
<img class="icon icon-{{ icon_id|clean_class }}" src="{{ source }}" width="{{ width|default(24) }}" height="{{ height|default(24) }}">Dans cet exemple, lors de la sélection d'un icône, un formulaire permettra de saisir une taille 
.
Les challenges
Une difficulté inattendue à été l'intégration avec CKEditor 5. L'API de gestion des Plugin est relativement complexe et demande pas mal de code et de temps à comprendre.
Heureusement j'avais un point de départ, le plugin Drupal core pour la gestion des medias.
Pour le sélecteur d'Icônes j'ai déclaré un nouveau FormElement, la complexité à été la combinaison d'utilisation d'Ajax API pour utiliser autocomplete pour la sélection et un appel dynamique pour l'affichage d'un sous formulaire des settings.
Le module inclus également un élément plus orienté picker au lieu d'autocomplete, pour fournir une mailleur sélection d'icônes, le problème reste dans l'intégration de ce dernier avec CKEditor.
La suite
Le module est encore en période de développement et pas encore complètement stable. De plus une proposition est en cours pour l'intégration de la base du module directement dans Drupal core.