アイコンライブラリー.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

アイコンピッカーがあるのはIconエレメントとCircle counterエレメントで、サイトに登録されたすべてのアイコンセットが表示されます。DXPR Builderは14セットを同梱しています。モジュールとテーマはYAMLファイルで追加できます。このページでは同梱セットを一覧し、読み込み方法を説明し、追加方法を示します。ロール別の表示制限にはビルダープロファイルを使います。詳しくはユーザープロファイルをご覧ください。

同梱アイコンセット

セットはdxpr_builder.dxpr_icon_sets.ymlに登録されています。

キー	ピッカーでのラベル	クラスプレフィックス	ライブラリー
`bi`	Bootstrap Icons	`bi`	`dxpr_builder/elements.bootstrap_icons`
`et`	ET Line Icons	`et`	`dxpr_builder/elements.et_line_font`
`fab`	Font Awesome Free Brands	`fab`	`dxpr_builder/elements.font_awesome_6_free`
`far`	Font Awesome Free Regular	`far`	`dxpr_builder/elements.font_awesome_6_free`
`fas`	Font Awesome Free Solid	`fas`	`dxpr_builder/elements.font_awesome_6_free`
`glyphicon`	Glyphicon Halflings	`glyphicon`	`dxpr_builder/elements.glyphicons_halflings`
`pe`	Pixeden Line Icons	`pe`	`dxpr_builder/elements.pe_icon_7_stroke`
`ph`	Phosphor Icons Regular	`ph`	`dxpr_builder/elements.phosphor_icons`
`ph_bold`	Phosphor Icons Bold	`ph-bold`	`dxpr_builder/elements.phosphor_icons_bold`
`ph_duotone`	Phosphor Icons Duotone	`ph-duotone`	`dxpr_builder/elements.phosphor_icons_duotone`
`ph_fill`	Phosphor Icons Fill	`ph-fill`	`dxpr_builder/elements.phosphor_icons_fill`
`ph_light`	Phosphor Icons Light	`ph-light`	`dxpr_builder/elements.phosphor_icons_light`
`ph_thin`	Phosphor Icons Thin	`ph-thin`	`dxpr_builder/elements.phosphor_icons_thin`
`fa`	Font Awesome (v4 compatibility)	`fa`	`dxpr_builder/elements.font_awesome_6_free`

ピッカーにfaセットはありません。アイコン一覧がないためです。古いfaクラスで保存されたアイコンはFont Awesomeライブラリーを読み込みます。古いFont Awesomeライブラリー名で保存されたページにはdxpr_builder/elements.font_awesome_v4_shimsスタイルシートも適用され、アイコンは引き続き表示されます。

すべてのFont AwesomeセットはFont Awesome Free 7を読み込みます。ライブラリーはバージョン6のマシン名を保持しています。保存済みページとカスタムコードが参照するためです。変更点はDXPR BuilderのFont Awesome 7に一覧があります。

ピッカーとページのアイコン読み込み

セットのドロップダウンはAll icon setsから始まり、アイコン一覧のある登録済みセットをすべて一覧します。fa以外の同梱13セットには組み込み一覧があるため、DXPR Builderのみのサイトには14エントリが表示されます。他のモジュールやテーマのセットは、表示のためにYAML内のicons一覧が必要です。

編集者がアイコンを選ぶと、エレメントはアイコンのクラス(例: bi bi-star)とライブラリー名を保存します。訪問者がダウンロードするのはページが使うアイコンフォントのみです。エディターではET Line、Pixeden、Glyphiconはエディター自体と一緒に読み込まれ、ピッカーは開くときに他のセットのスタイルシートを読み込みます。

編集者のアイコン選択とスタイル方法はアイコンの追加にあります。

ロールごとのアイコンセット制限

各ビルダープロファイルにはIcon setsグループがあり、セットごとのボックスとCheck/Uncheck all Icon setsボックスがあります。設定はDXPR Studio > DXPR Builder > User Profilesで行います。手順はユーザープロファイルにあります。グループの動作は次のとおりです。

チェックがあるのはCheck/Uncheck all Icon setsで、その場合ロールはすべてのセット(後から追加されたものを含む)を表示できます。
チェックがない場合はチェックしたセットのみ表示されます。新しいプロファイルはすべてのセットにチェックした状態で始まるため、後から追加されたセットはチェックするまで非表示のままです。
チェックがなく、セットにもチェックがない場合はピッカーが空になります。
ページ上の既存アイコンは引き続き表示されます。プロファイルが変えるのはピッカーの提供内容のみです。

アイコンセットの追加

アイコンセットはYAMLエントリとDrupalライブラリーの組み合わせです。DXPR Builderはインストール済みのすべてのモジュールとテーマから*.dxpr_icon_sets.ymlを読み取ります。プロパティリファレンスとalterフックはカスタムアイコンセットにあります。

作成するのはmymodule/mymodule.dxpr_icon_sets.ymlです。
```
brand:
  label: 'Brand icons'
  prefix: brand
  css: css/brand-icons.css
  library: mymodule/brand_icons
  icons:
    - 'brand brand-logo'
    - 'brand brand-arrow'
```
cssはモジュールフォルダーからの相対パスで、エディターで読み込まれます。各アイコンはプレフィックスと、プレフィックス＋ハイフンで始まるクラスの組み合わせです。
宣言するのはmymodule.libraries.ymlです。訪問者のページが読み込みます。
```
brand_icons:
  css:
    theme:
      css/brand-icons.css: {}
```
キャッシュはdrush crでクリアします。
新しいセットにチェックするのはCheck/Uncheck all Icon setsにチェックのないすべてのビルダープロファイルです。
開くのはIconエレメントの設定で、セットドロップダウンでBrand iconsを選びます。

カスタムモジュールはalterフックでピッカーからセットを削除することもできます。コードはHooks APIリファレンスにあります。同梱セットのアイコンは保存済みページで引き続き読み込まれます。削除されたカスタムセットのアイコンはCSSの読み込みを停止します。DXPR Builderがアタッチするのは登録済みセットが指定するライブラリーのみのためです。

アイコンセットがない場合

新しいセットがドロップダウンにありません。YAMLにicons一覧がないか、キャッシュが古いレジストリーを保持しています。一覧を追加してdrush crを実行します。
一部の編集者にのみセットがありません。そのビルダープロファイルがチェックしていません。Icon sets配下(/admin/dxpr_studio/dxpr_builder/profile)でチェックします。
アイコンはエディターに表示されるが訪問者には表示されません。エディターはセットのcssファイルを読み込みますが、訪問者のページはlibraryを読み込みます。libraryがCSSファイルを含むmymodule.libraries.yml内のライブラリーを指定していることを確認します。

次のステップ

カスタムアイコンセット：YAMLプロパティリファレンスとalterフック。
アイコンの追加：Iconエレメントの設定。