カスタムアイコンセット.

Learn DXPR BuilderExtendBouw erop voort

アイコンピッカーは14の組み込みアイコンセットを提供します。モジュールやテーマのYAMLファイルで独自セットを追加するか、alterフックで一覧を変更します。モジュールは有効なモジュール・テーマ内のすべての*.dxpr_icon_sets.ymlファイルをマージしてからフックを実行します。

組み込みセット

由来はdxpr_builder.dxpr_icon_sets.yml。

キー ラベル プレフィックス
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

Builderプロフィールでは編集者に見せるセットを制限できます(プロフィールフォームのIcon sets)。

作るのはモジュールやテーマのルートにあるmymodule.dxpr_icon_sets.ymlです。

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'

先行セットと同じキーのセットは置換します。

プロパティ

プロパティ 必須 説明
label はい アイコンセットのドロップダウン名。欠落時はキーを使用
prefix はい このセットのアイコンを識別するCSSクラスプレフィックス
css はい エディターが読み込むスタイルシート。相対パスはモジュール・テーマルートから解決
library はい 保存コンテンツがこのセットを使う場合に訪問者向けに添付されるDrupalライブラリー
icon_prefix いいえ アイコン名のプレフィックスで、prefixと異なる場合。例：fas fa-heart
icons Yes* アイコンクラスの全リスト

組み込みセットはiconsを省略します。エディターはその一覧をJavaScriptで持ちます。独自セットでは全アイコンを列挙必須です。

Drupalライブラリー定義

スタイルシートをmymodule.libraries.ymlにライブラリーとして登録します。アイコンを使うページで訪問者に届きます。

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

モジュールは名前に/を含むライブラリーを、登録済みアイコンセットのlibraryである場合にのみ添付します。

Alterフック

実行時ロジック(条件付きでのセット追加など)にはhook_dxpr_builder_icon_sets_alter()を実装します。フックはYAMLパス解決後に実行されるため、cssには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'],
    ];
  }
}

他のフックはフックAPIリファレンスを参照。

組み込みセットの削除

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

セットを確認する

  1. キャッシュをクリアします。drush cr。
  2. Builderでページを開き、Iconエレメントを追加します。
  3. アイコンピッカーを開き、ドロップダウンで独自セットを選びます。
  4. アイコンを選び、保存して、訪問者としてページを見てアイコンがレンダーされるか確認します。