Set di icone personalizzati.

Impara DXPR BuilderEstendiCostruisci su DXPR

Il selettore di icone offre 14 set di icone integrati. Aggiungi i tuoi con un file YAML nel tuo modulo o tema, oppure cambia l’elenco con un hook alter. Il modulo unisce tutti i file *.dxpr_icon_sets.yml trovati nei moduli e temi attivi, poi esegue l’hook.

Set integrati

Da dxpr_builder.dxpr_icon_sets.yml:

Chiave	Etichetta	Prefisso
`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 profilo builder può limitare quali set vedono i suoi editor (Icon sets nel form del profilo).

Rilevamento YAML (consigliato)

Crea mymodule.dxpr_icon_sets.yml nella root del tuo modulo 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 set con la stessa chiave di uno precedente lo sostituisce.

Proprietà

Proprietà	Obbligatoria	Descrizione
`label`	Sì	Nome nel menu a discesa dei set di icone; quando manca si usa la chiave
`prefix`	Sì	Prefisso delle classi CSS che identifica le icone di questo set
`css`	Sì	Foglio di stile caricato dall’editor; un percorso relativo è risolto dalla root del tuo modulo o tema
`library`	Sì	Libreria Drupal collegata per i visitatori quando i contenuti salvati usano questo set
`icon_prefix`	No	Prefisso del nome dell’icona quando differisce da `prefix`, come in `fas fa-heart`
`icons`	Sì*	Elenco completo delle classi di icone

*I set integrati omettono icons; l’editor ne ha gli elenchi in JavaScript. Il tuo set deve elencare ogni icona.

Definizione di libreria Drupal

Registra il foglio di stile come libreria in mymodule.libraries.yml, così i visitatori lo ricevono nelle pagine che usano le tue icone:

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

Il modulo collega una libreria con una / nel nome solo quando è la library di un set di icone registrato.

Hook alter

Per logica runtime, come aggiungere un set solo a una condizione, implementa hook_dxpr_builder_icon_sets_alter(). L’hook gira dopo che i percorsi YAML sono risolti, quindi dai a css un percorso dalla root di 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'],
    ];
  }
}

Vedi Riferimento API hook per gli altri hook.

Rimuovere i set integrati

/**
 * 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']);
}

Verifica il tuo set

Svuota la cache: drush cr.
Apri una pagina nel builder e aggiungi un elemento Icon.
Apri il selettore di icone e scegli il tuo set nel menu a discesa.
Scegli un’icona, salva e guarda la pagina come visitatore per confermare che l’icona si renderizza.