--- url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/development/icon-sets' title: '사용자 정의 아이콘 세트 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T01:40:39+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: - '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-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-24T01:40:39+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/development/icon-sets' articleSection: 'Bouw erop voort' - '@type': WebPage '@id': 'https://dxpr.com/ko/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/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) /[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` | 빌더 프로필은 편집자가 보는 세트를 제한할 수 있습니다(프로필 양식의 **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` | 예\* | 아이콘 클래스의 전체 목록. | \*내장 세트는 `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 참조](/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. 아이콘을 고르고 저장한 뒤 방문자로 페이지를 보며 아이콘이 렌더링되는지 확인하세요.