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.

Thanks, Pierre and Jean

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.
  • 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.

Bootstrap Icons 2078

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

Icon Library browser
Filter Arrow
Filtered icons with Arrow

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • feat: #3558118 Add UI Icons ~1.1.0 module integration and enable related submodules

    Added UI Icons in Varbase Components doc page

Comments

rajab natshah created an issue. See original summary.

rajab natshah’s picture

Title: Add UI Icons module » Add UI Icons module integration and enable related submodules
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Title: Add UI Icons module integration and enable related submodules » Add UI Icons ~1.1.0 module integration and enable related submodules

  • rajab natshah committed 8d9dee4e on 3.0.x
    feat: #3558118 Add UI Icons ~1.1.0 module integration and enable related...
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Assigned: rajab natshah » s.halawani
Issue summary: View changes
Status: Active » Needs review
Issue tags: +varbase-10.1.0-rc1, +varbase_components-3.0.0-rc1
rajab natshah’s picture

Assigned: s.halawani » Unassigned
Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes

✅ Released varbase-10.1.0-rc1

rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.