--- url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/integrations/media-library' title: '사용자 정의 아이콘 세트 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:54:52+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: - 'Drupal-functies koppelen' 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-24T08:54:52+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/ko/hc/documentation/learn-dxpr-builder/integrations/media-library' articleSection: 'Drupal-functies koppelen' - '@type': WebPage '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/integrations/media-library' 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/ko' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ko --- [Help Center](/ko/node/75)/[Documentation](/ko/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Drupal-functies koppelen](/hc/documentation/learn-dxpr-builder/integrations) # 사용자 정의 아이콘 세트. Learn DXPR BuilderManage the siteDrupal-functies koppelen ## In this guide Related guides - [Entity Browser로 이미지 선택하기](/ko/hc/documentation/learn-dxpr-builder/integrations/entity-browser) 아이콘 선택기는 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**). ## 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' ``` 이전 세트와 키가 같은 세트는 해당 세트를 대체합니다. ### 속성 | 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`에 스타일시트를 라이브러리로 등록합니다. 아이콘을 사용하는 페이지의 방문자가 해당 파일을 받게 됩니다. ```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 reference](/ko/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. 아이콘을 고르고 저장한 뒤 방문자로 페이지를 확인하여 아이콘이 렌더링되는지 확인합니다.