Conjuntos de ícones personalizados.

Learn DXPR BuilderExtendBouw erop voort

O seletor de ícones oferece 14 conjuntos de ícones incluídos. Adicione os próprios com um ficheiro YAML no módulo ou tema, ou mude a lista com um hook de alteração. O módulo junta cada ficheiro *.dxpr_icon_sets.yml que encontra em módulos e temas ativos e depois corre o hook.

Conjuntos incluídos

De dxpr_builder.dxpr_icon_sets.yml:

Key	Label	Prefix
`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`

Um perfil do construtor pode limitar que conjuntos os editores veem (Icon sets no formulário de perfil).

Descoberta YAML (recomendado)

Crie mymodule.dxpr_icon_sets.yml na raiz do módulo ou 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'

Um conjunto com a mesma chave de um anterior substitui-o.

Propriedades

Property	Required	Description
`label`	Yes	Nome na lista de conjuntos de ícones; a chave usa-se quando falta
`prefix`	Yes	Prefixo de classe CSS que identifica ícones deste conjunto
`css`	Yes	Folha de estilos que o editor carrega; um caminho relativo resolve-se da raiz do módulo ou tema
`library`	Yes	Biblioteca do Drupal anexada para visitantes quando o conteúdo guardado usa este conjunto
`icon_prefix`	No	Prefixo do nome do ícone quando difere de `prefix`, como em `fas fa-heart`
`icons`	Yes*	Lista completa de classes de ícone

*Os conjuntos incluídos omitem icons; o editor tem as listas em JavaScript. O conjunto próprio tem de enumerar cada ícone.

Definição de biblioteca do Drupal

Registe a folha de estilos como biblioteca em mymodule.libraries.yml, para os visitantes a receberem em páginas que usam os ícones:

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

O módulo anexa uma biblioteca com / no nome apenas quando é a library de um conjunto de ícones do registo.

Hook de alteração

Para lógica de execução, como adicionar um conjunto apenas sob alguma condição, implemente hook_dxpr_builder_icon_sets_alter(). O hook corre depois de os caminhos YAML serem resolvidos, por isso dê a css um caminho da raiz do 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'],
    ];
  }
}

Consulte Referência da API de hooks para os outros hooks.

Remover conjuntos incluídos

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

Verificar o conjunto

Limpe a cache: drush cr.
Abra uma página no construtor e adicione um elemento Icon.
Abra o seletor de ícones e escolha o conjunto na lista.
Escolha um ícone, guarde, e veja a página como visitante para confirmar que o ícone se apresenta.