---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/development/icon-sets'
title: '自定义图标集 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:45:43+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  图标选择器提供 14 个内置图标集。您用模块或主题中的 YAML 文件添加自己的集，或用 alter 钩子更改列表。模块合并在启用模块和主题中找到的每个 *.dxpr_icon_sets.yml 文件，再运行钩子。
  内置集
  来自 dxpr_builder.dxpr_icon_sets.yml：
tags:
  - 'Bouw erop voort'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 自定义图标集
      description: |-
        图标选择器提供 14 个内置图标集。您用模块或主题中的 YAML 文件添加自己的集，或用 alter 钩子更改列表。模块合并在启用模块和主题中找到的每个 *.dxpr_icon_sets.yml 文件，再运行钩子。
        内置集
        来自 dxpr_builder.dxpr_icon_sets.yml：
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:45:43+0000'
      dateModified: '2026-10-24T09:09:48+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/development/icon-sets'
      articleSection: 'Bouw erop voort'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/development/icon-sets'
      description: |-
        图标选择器提供 14 个内置图标集。您用模块或主题中的 YAML 文件添加自己的集，或用 alter 钩子更改列表。模块合并在启用模块和主题中找到的每个 *.dxpr_icon_sets.yml 文件，再运行钩子。
        内置集
        来自 dxpr_builder.dxpr_icon_sets.yml：
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Extend](/hc/documentation/learn-dxpr-builder/extend) /[Bouw erop voort](/hc/documentation/learn-dxpr-builder/extend/build-on-it) # 自定义图标集.

 Learn DXPR BuilderExtendBouw erop voort

   ## In this guide

图标选择器提供 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`：

```yaml
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` 中将样式表注册为库，使用您图标的页面访客才能获得它：

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

```

模块只在带 `/` 的库名是已注册图标集的 `library` 时才附加它。

## Alter 钩子

运行时逻辑（例如只在某条件下添加集）请实现 `hook_dxpr_builder_icon_sets_alter()`。钩子在 YAML 路径解析后运行，因此 `css` 给从 Drupal 根目录起的路径：

```php
/**
 * 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 参考](/zh-hans/hc/documentation/learn-dxpr-builder/development/hooks-api)。

## 移除内置集

```php
/**
 * 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. 在构建器中打开页面并添加 Icon 元素。
3. 打开图标选择器，在下拉菜单中选择您的集。
4. 挑选图标，保存，以访客身份查看页面确认图标渲染。