自定义图标集.

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`

构建器档案可以限制其编辑人员看到的集（档案表单上的 Icon sets）。

YAML 发现（推荐）

在模块或主题根目录创建 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`	是*	图标类的完整列表

*内置集省略 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'],
    ];
  }
}

其他钩子请参阅 Hooks 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']);
}

检查您的集

清除缓存：drush cr。
在构建器中打开页面并添加 Icon 元素。
打开图标选择器，在下拉菜单中选择您的集。
挑选图标，保存，以访客身份查看页面确认图标渲染。