My new module UI Icons

Following my work with the incredible team at UI Patterns, another need has arisen to use Drupal and UI Patterns in managing Design Systems: icons   !

Why Icons

In a Design System, there are several artifacts: Components, Layouts, Styles, Themes, CSS Variables, Example Pages, and of course Icons!
UI Patterns already integrates all other artifacts, only icons were missing  .

After some ecosystem research   Drupal does not offer many generic modules to provide the declaration and management of agnostic icon packs.

There are good modules, the one closest to the need being Iconset. Unfortunately, a dependency on a sub-module and more rigid management makes it difficult to use for UI Patterns.

A new module to gather them all

So, I created a specific module for the generic management of icon packs: UI Icons

The base is simple and close to Iconset, allowing the declaration of an Icon pack declaratively in a  YAML file.

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">

And there you go! The svg icons will be available for use with Drupal. Several sub-modules allow integration with Render API, Twig, CKEditor, Fields, Menu, UI Patterns ...

The module offers many examples with the most common icons:  Bootstrap, FontAwesome, Icomoon, Phosphor, Iconify... and more.

Additionally, to bring flexibility to the template, a settings key allows defining variables that will be accessible by the user during input and usable in the template, for example:

  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) }}">

In this example, when selecting an icon, a form will allow entering a size  .

The Challenges

An unexpected difficulty was the integration with CKEditor 5. The API for managing plugins is relatively complex and requires quite a bit of code and time to understand.
Fortunately, I had a starting point, the Drupal core plugin for media management.

For the Icon selector, I declared a new FormElement, the complexity was the combination of using the Ajax API to use autocomplete for selection and a dynamic call for displaying a sub-form of the settings.

The module also includes a more picker-oriented element instead of autocomplete, to provide a better selection of icons, the problem remains in integrating this with CKEditor.

What's Next

The module is still in the development phase and not yet completely stable. Additionally, a proposal is underway for integrating the base of the module directly into Drupal core.