--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/development/icon-sets' title: 'カスタムアイコンセット | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:28:16+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-24T11:28:16+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-24T11:28:16+0000' dateModified: '2026-10-24T11:28:16+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/ja/hc/documentation/learn-dxpr-builder/development/icon-sets' articleSection: 'Bouw erop voort' - '@type': WebPage '@id': 'https://dxpr.com/ja/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/ja' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ja --- [Help Center](/ja/node/75)/[Documentation](/ja/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` | Builderプロフィールでは編集者に見せるセットを制限できます(プロフィールフォームの**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` | Yes\* | アイコンクラスの全リスト | 組み込みセットは`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'], ]; } } ``` 他のフックは[フックAPIリファレンス](/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. Builderでページを開き、Iconエレメントを追加します。 3. アイコンピッカーを開き、ドロップダウンで独自セットを選びます。 4. アイコンを選び、保存して、訪問者としてページを見てアイコンがレンダーされるか確認します。