[1.1.x] Adopts the new Icon API

Created on 28 October 2024, 19 days ago

Problem/Motivation

As a replacement of 📌 Align icon lists between patterns and styles Active , let's implement the new Icon API : Add an icon management API Active

Steps to reproduce

Proposed resolution

1. Replace long enum props :

    icon:
       title: Icon
       description: 'Avaliable button icons.'
      type: string
      enum:
        - fr-icon-account-circle-fill
        - fr-icon-account-circle-line
        - fr-icon-account-fill
        ...
      'meta:enum':
        fr-icon-account-circle-fill: 'account circle fill'
        fr-icon-account-circle-line: 'account circle line'
        fr-icon-account-fill: 'account filled'
        ...

by UI Patterns 2's icon prop type:

    icon:
       title: Icon
       description: 'Avaliable button icons.'
      $ref: ui-patterns://icon

2. In templates, replace the use of this icon, from string to mapping:

-  {% set attributes = attributes.addClass(icon) %}
+  {% set attributes = attributes.addClass("fr-icon-" ~ icon.icon) %}

Careful, because the Icon API and ui_icons are not stable yet. For example, icon.icon can change.

Also, attributes.addClass("fr-icon-" ~ icon.icon) works only with "dsfr" icon pack, not with "pictograms". We can add a condition in templates.

3. Add dependency. Today, the icon prop type and its related source plugin are found in this module: https://git.drupalcode.org/project/ui_icons/-/tree/1.0.x/modules/ui_icon...

But it will move in https://git.drupalcode.org/project/ui_patterns/-/tree/2.0.x/src/Plugin/U... as soon as Add an icon management API Active is merged.

📌 Task
Status

Active

Version

1.0

Component

Code

Created by

🇫🇷France pdureau Paris

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

Comments & Activities

Production build 0.71.5 2024