사용자 정의 아이콘 세트.

Learn DXPR BuilderManage the siteDrupal-functies koppelen

아이콘 선택기는 14개의 기본 제공 아이콘 세트를 제공합니다. 모듈이나 테마의 YAML 파일로 직접 추가하거나 alter 훅으로 목록을 변경할 수 있습니다. 모듈은 활성화된 모듈과 테마에서 발견한 모든 *.dxpr_icon_sets.yml 파일을 병합한 뒤 훅을 실행합니다.

기본 제공 세트

다음 파일 기준: dxpr_builder.dxpr_icon_sets.yml:

Key Label Prefix
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).

모듈이나 테마의 루트에 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'

이전 세트와 키가 같은 세트는 해당 세트를 대체합니다.

속성

Property Required Description
label Yes 아이콘 세트 드롭다운에 표시되는 이름입니다. 없을 때는 키가 사용됩니다.
prefix Yes 이 세트의 아이콘을 식별하는 CSS 클래스 접두사입니다.
css Yes 에디터가 로드하는 스타일시트입니다. 상대 경로는 모듈이나 테마 루트 기준으로 해석됩니다.
library Yes 저장된 콘텐츠가 이 세트를 사용할 때 방문자에게 연결되는 Drupal 라이브러리입니다.
icon_prefix No 아이콘 이름의 접두사로, 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'],
    ];
  }
}

다른 훅은 Hooks API reference를 참조합니다.

기본 제공 세트 제거하기

/**
 * 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. 아이콘을 고르고 저장한 뒤 방문자로 페이지를 확인하여 아이콘이 렌더링되는지 확인합니다.