Nueva api de iconos en Drupal

icons
Solucionex
18
Mar 25

A partir de la versión 11.1, Drupal incluye una api para gestionar paquetes de iconos.

Para definir un pack de iconos, simplemente hay que crear un archivo *.icons.yml en un módulo o tema.

Ejemplo

Se explican las propiedades tras el ejemplo.

my_icons:
  label: 'My icons'
  extractor: svg_sprite
  config:
    sources:
      - dist/spritemap.svg
  settings:
    size:
      title: Size
      type: integer
      default: 16
    color:
      title: Color
      type: string
      enum:
        - ''
        - 'text-primary'
        - 'text-secondary'
        - 'text-black'
        - 'text-white'
      'meta:enum':
        '': 'Current color'
        'text-primary': Primary
        'text-secondary': Secondary
        'text-black': Black
        'text-white': White
  template: >-
    <svg
      {{ attributes
        .setAttribute('width', size|default('24'))
        .setAttribute('height', size|default('24'))
        .setAttribute('aria-hidden', 'true')
        .addClass('fill-current', color)
      }}
    >
      <use href="{{ source }}#{{ icon_id }}" />
    </svg>

Importante: pueden definirse N paquetes de iconos en el mismo archivo (por ejemplo, tipos outline y filled). Pueden verse más ejemplos aquí.

extractor

Los extractores que incluye el core son:

  • path: Coge todos los iconos que se le pasen en la propiedad sources y aplica la ruta de cada uno en la plantilla. Puede usarse por ejemplo para iconos en formato .png
  • svg: Coge todos los iconos que se le pasen en la propiedad sources y aplica el contenido de cada uno en la plantilla. Puede usarse por ejemplo cuando se tienen iconos svg separados
  • svg_sprite: Coge todos los spritemaps svg que se le pasen en la propiedad sources y aplica su ancla en la plantilla

Aparte, pueden crearse extractores personalizados.

config > sources

Array de rutas de donde se extraerán los iconos. Permite urls externas (si el extractor es path) y obtener todos los de una carpeta usando el asterisco. Ej:

---
   config:
    sources:
      - icons/flat/*.png
      - icons/group/{group}/*.png
      - https://www.drupal.org/files/D10-logo.png

settings

Configuraciones del icono (basándose en el formato de json schema, de manera parecida a los sdc). En el ejemplo se hace configurable el tamaño y el color. De ser usado el icono en la UI de Drupal, se generaría un campo numérico y un select respectivamente (inferidos del tipo y valores permitidos).

Importante: Json schema no permite poner etiquetas a los valores definidos en una enum, por lo que Drupal permite añadirlas usando la propiedad meta:enum.

template

Es la plantilla de twig que renderizará el icono. Recibe tanto la fuente (que dependiendo del extractor será la ruta / contenido / ancla) como los valores de la configuración.

Renderizar iconos

Para renderizar los iconos usando la nueva api, puede hacerse con un render array:

 $build['icon'] = [
   '#type' => 'icon',
   '#pack_id' => 'my_icons',
   '#icon_id' => 'home',
   '#settings' => [
     'size' => 32,
     'color' => 'text-black',
   ],
 ];

o directamente desde Twig usando al función icon:

{{ icon('my_icons', 'home', {size: 32, color: 'text-black'}) }}

Integración con la UI de Drupal

El módulo UI Icons permite la integración de los iconos definidos con la nueva api en campos de enlace, CKEditor, menús, etc. También tiene ejemplos de integraciones de paquetes de iconos exitentes como Fontawesome, Bootstrap, Heroicons, etc.

Foto de Harpal Singh en Unsplash.