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.