Problem/Motivation
A consistent icon management system is needed across Varbase and custom components.
The UI Icons module provides a scalable, pattern-friendly, field-compatible icon framework.
Integrating it (with its submodules) enables icon libraries, field widgets, pickers, and pattern-based
usage in Varbase components and UI Patterns.
After working with the Drupal Core Icon API - which integrates with almost all parts of Drupal dynamic system and configs.
It is the better logic and path to manage icons.
No more load of icons in CSS
Also as we are moving to use HTMX
UI Icons
leverage Drupal 11.1 Icon API which allow to define icon packs as YAML-discovered to integrate seamlessly in Drupal development and site-building with Field API (with Link attributes), CKeditor5, Menu API, Media, a Web font extractor and a library.
Proposed resolution
- Add the following modules in the default Varbase Components recipe:
- UI Icons Form element (
ui_icons): Core Icons main form element for Icon autocomplete. - UI Icons for UI Patterns (
ui_icons_patterns): Icons integration with UI Patterns 1.x and UI Patterns 2.x. - UI Icons Fields (
ui_icons_field): Field type Icon and field type Link integration. - UI Icons Picker (
ui_icons_picker): Provide a fancy icon picker for UI Icons selector. - UI Icons Library (
ui_icons_library): Overview of all icons available on your site.
- UI Icons Form element (
- Only for Super Admins Enable selected admin limited modules during applying the default Varbase Components recipe.
- No custom Size, Color, or Class settings in the default bootstrap icons settings
- Expose UI Icons to UI Patterns and SDC components for icon selection.
- Allow developers to register custom icon libraries.
Remaining tasks
- ✅ File an issue about this project
- ✅ Addition/Change/Update/Fix to this project
- ✅ Testing to ensure no regression
- ➖ Automated unit/functional testing coverage
- ✅ Developer Documentation support on feature change/addition
Added UI Icons in Varbase Components doc page
- ➖ User Guide Documentation support on feature change/addition
- ➖ UX/UI designer responsibilities
- ➖ Accessibility and Readability
- ✅ Code review from 1 Varbase core team member
- ✅ Full testing and approval
- ✅ Credit contributors
- ✅ Review with the product owner
- ✅ Update Release Notes and Update Helper on new feature change/addition
- ✅ Release varbase-10.1.0-rc1, varbase_components-3.0.0-rc1
Varbase update type
- ✅ No Update
- ➖ Optional Update
- ➖ Forced Update
- ➖ Forced Update if Unchanged
User interface changes
API changes
- N/A
Data model changes
- N/A
Comments
Comment #2
rajab natshahComment #3
rajab natshahComment #4
rajab natshahComment #6
rajab natshahComment #7
rajab natshahComment #8
rajab natshahComment #10
rajab natshahComment #11
rajab natshahComment #12
rajab natshahComment #13
rajab natshah✅ Released varbase_components-3.0.0-rc1
Comment #14
rajab natshah✅ Released varbase-10.1.0-rc1
Comment #15
rajab natshahComment #16
rajab natshahComment #17
rajab natshahComment #18
rajab natshah