Experience Builder should support Drupal's new Icon API

Created on 8 February 2025, about 2 months ago

Overview

It's a very common use case to inject icons into your page's components. This could be cards, buttons, etc etc.

Drupal has a very kickass new icon API β†’ that should be a first class citizen within XB.

Proposed resolution

XB should integrate an icon picker similar to the UI Icons module β†’ .

There's been some discussion in Slack at https://drupal.slack.com/archives/C072JMEPUS1/p1738947721661279 with @lleber @Jean @lauriii and @longwave.

One item brought up is that XB currently supports D10, which doesn't have the new icon API. However there is a backport module, ui_icons_backport

User interface changes

✨ Feature request
Status

Active

Version

0.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States mherchel Gainesville, FL, US

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @mherchel
  • πŸ‡§πŸ‡ͺBelgium wim leers Ghent πŸ‡§πŸ‡ͺπŸ‡ͺπŸ‡Ί

    Thanks for raising this β€” and looks very cool!

    How do you imagine this would work? Which SDC props should accept this?

    • Is it an existing shape (type + format …)?
    • Is it a new one? The icon equivalent of $ref: json-schema-definitions://experience_builder.module/image?
  • πŸ‡ΊπŸ‡ΈUnited States mherchel Gainesville, FL, US

    How do you imagine this would work? Which SDC props should accept this?

    I would assume that it would be the latter (icon equivalent of $ref: json-schema-definitions://experience_builder.module/image).

    This would then provide a form element similar to the gif in the issue summary. This would then (I think) return a SVG which could then be inserted into an icon component.

    Does that make sense? I'm not too particular on the implementation. There might be lots of gotchas, but I would like to make sure the editorial experience is great (with the dedicated icon picker), and that the DX is great by allowing an easy way to specify the icon widget from within the SDC's component.yml file.

  • πŸ‡«πŸ‡·France mogtofu33

    The Icon API β†’ provide a render element and a Twig function based on the icon id, so the form element can simply return the icon id (pack_id:icon_id).

    For the available icons, need to create an icon pack discovery yaml (see doc β†’ ). One file can reference all available icons through different paths.

    For some starting point you can check ui_icons FormElement and derived picker FormElement.
    This form element is a bit complex because of the feature to be able to set custom settings to the icon (size, color, ...) perhaps you don't need that.

  • πŸ‡§πŸ‡ͺBelgium wim leers Ghent πŸ‡§πŸ‡ͺπŸ‡ͺπŸ‡Ί

    I would assume that it would be the latter (icon equivalent of $ref: json-schema-definitions://experience_builder.module/image).

    That works!

    @lauriii β€” how high on the priority list is this?

  • πŸ‡ͺπŸ‡ΈSpain gxleano CΓ‘ceres

    The Iconify Icons β†’ module already includes a submodule, the Iconify Icons Provider, which is fully integrated with the new Icon API. It provides a wide range of icon sets, making it a great opportunity to offer similar flexibility to XB users.

  • πŸ‡«πŸ‡·France pdureau Paris

    Nice to see so much great people here (David, Jean, Mike, Wim).

    It would be nice to add a Icon API Form Element into Drupal Core. We didn't do it last December, in order to iterate in contrib space first. But it may be relevant now.

  • πŸ‡§πŸ‡ͺBelgium wim leers Ghent πŸ‡§πŸ‡ͺπŸ‡ͺπŸ‡Ί

    I know now that it's definitely not considered a stable (1.0 blocker).

    @pdureau When you said "form element", did you mean field type + field widget?

  • πŸ‡§πŸ‡ͺBelgium wim leers Ghent πŸ‡§πŸ‡ͺπŸ‡ͺπŸ‡Ί

    Per #8.

Production build 0.71.5 2024