Conjuntos de iconos personalizados.

Aprende DXPR BuilderExtenderDesarrollar encima

El selector de iconos ofrece 14 conjuntos de iconos integrados. Añades el tuyo con un archivo YAML en tu módulo o tema, o cambias la lista con un hook de alteración. El módulo fusiona cada archivo *.dxpr_icon_sets.yml que encuentra en módulos y temas habilitados, y luego ejecuta el hook.

Conjuntos integrados

Desde dxpr_builder.dxpr_icon_sets.yml:

Clave	Etiqueta	Prefijo
`bi`	Bootstrap Icons	`bi`
`et`	ET Line Icons	`et`
`fa`	Font Awesome (v4 compatibility)	`fa`
`fab`	Font Awesome Free Brands	`fab`
`far`	Font Awesome Free Regular	`far`
`fas`	Font Awesome Free Solid	`fas`
`glyphicon`	Glyphicon Halflings	`glyphicon`
`pe`	Pixeden Line Icons	`pe`
`ph`	Phosphor Icons Regular	`ph`
`ph_bold`	Phosphor Icons Bold	`ph-bold`
`ph_duotone`	Phosphor Icons Duotone	`ph-duotone`
`ph_fill`	Phosphor Icons Fill	`ph-fill`
`ph_light`	Phosphor Icons Light	`ph-light`
`ph_thin`	Phosphor Icons Thin	`ph-thin`

Un perfil del constructor puede limitar qué conjuntos ven sus personas que editan (Icon sets en el formulario de perfil).

Descubrimiento YAML (recomendado)

Crea mymodule.dxpr_icon_sets.yml en la raíz de tu módulo o tema:

material:
  label: 'Material Symbols'
  prefix: material-symbols
  css: vendor/material-symbols/material-symbols.css
  library: mymodule/material_symbols
  icons:
    - 'material-symbols material-symbols-star'
    - 'material-symbols material-symbols-home'
    - 'material-symbols material-symbols-search'

Un conjunto con la misma clave que uno anterior lo reemplaza.

Propiedades

Propiedad	Obligatorio	Descripción
`label`	Sí	Nombre en el desplegable de conjuntos de iconos; la clave se usa cuando falta
`prefix`	Sí	Prefijo de clase CSS que identifica iconos de este conjunto
`css`	Sí	Hoja de estilos que el editor carga; una ruta relativa se resuelve desde la raíz de tu módulo o tema
`library`	Sí	Biblioteca Drupal adjunta para visitas cuando el contenido guardado usa este conjunto
`icon_prefix`	No	Prefijo del nombre de icono cuando difiere de `prefix`, como en `fas fa-heart`
`icons`	Sí*	Lista completa de clases de iconos

*Los conjuntos integrados omiten icons; el editor tiene sus listas en JavaScript. Tu propio conjunto debe enumerar cada icono.

Definición de biblioteca Drupal

Registra la hoja de estilos como biblioteca en mymodule.libraries.yml, para que las visitas la reciban en páginas que usan tus iconos:

material_symbols:
  css:
    theme:
      vendor/material-symbols/material-symbols.css: {}

El módulo adjunta una biblioteca con / en su nombre solo cuando es el library de un conjunto de iconos registrado.

Hook de alteración

Para lógica en tiempo de ejecución, como añadir un conjunto solo bajo alguna condición, implementa hook_dxpr_builder_icon_sets_alter(). El hook se ejecuta después de que las rutas YAML se resuelven, así que dale a css una ruta desde la raíz Drupal:

/**
 * Implements hook_dxpr_builder_icon_sets_alter().
 */
function mymodule_dxpr_builder_icon_sets_alter(array &$icon_sets) {
  if (some_condition()) {
    $module_path = \Drupal::service('extension.list.module')
      ->getPath('mymodule');
    $icon_sets['custom'] = [
      'label' => t('Custom Icons'),
      'prefix' => 'ci',
      'css' => $module_path . '/css/custom-icons.css',
      'library' => 'mymodule/custom_icons',
      'icons' => ['ci ci-logo', 'ci ci-arrow'],
    ];
  }
}

Consulta Referencia de la API de hooks para ver los demás hooks.

Quitar conjuntos integrados

/**
 * Implements hook_dxpr_builder_icon_sets_alter().
 */
function mymodule_dxpr_builder_icon_sets_alter(array &$icon_sets) {
  // Remove ET Line Icons from the picker.
  unset($icon_sets['et']);
}

Comprueba tu conjunto

Limpia la caché: drush cr.
Abre una página en el constructor y añade un elemento Icon.
Abre el selector de iconos y elige tu conjunto en el desplegable.
Escoge un icono, guarda, y mira la página como visita para confirmar que el icono se renderiza.