사용자 정의 아이콘 세트.

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).

모듈이나 테마 루트에 다음을 만드세요: 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'],
    ];
  }
}

다른 후크는 후크 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']);
}

세트 확인

  1. 캐시를 지우세요: drush cr.
  2. 빌더에서 페이지를 열고 Icon 요소를 추가하세요.
  3. 아이콘 선택기를 열고 드롭다운에서 세트를 고르세요.
  4. 아이콘을 고르고 저장한 뒤 방문자로 페이지를 보며 아이콘이 렌더링되는지 확인하세요.