Angular Icon 서비스 개요
Ignite UI for Angular 아이콘 서비스를 사용하면 개발자가 다양한 소스의 새 아이콘을 UI에 추가할 수 있습니다.
Introduction
Ignite UI for Angular 아이콘 서비스는 사용자가 아이콘 패밀리를 만들고 관리할 수 있는 여러 가지 방법을 제공합니다.
아이콘 서비스는 Ignite UI for Angular 패키지에서 직접 가져올 수 있습니다.
import { IgxIconComponent, IgxIconService } from 'igniteui-angular';
@Component({
selector: 'app-root',
standalone: true,
imports: [ IgxIconComponent ]
})
export class AppComponent implements OnInit {
constructor(public iconService: IgxIconService) {}
}
Adding Icon Families
기본적으로 아이콘 서비스는 기본 패밀리를 설정합니다 material.
새로운 아이콘 패밀리 추가는 아이콘 서비스의 방법을 사용하여 setFamily 수행됩니다. 렌더링해야 하는 아이콘에 대해 구성 요소에 지시 igx-icon 하는 일부 메타데이터가 있는 패밀리 항목을 만듭니다.
메서드가 setFamily 어떻게 작동하는지 설명하기 위해 실용적인 예를 사용하겠습니다.
/**
* The icon service associates a given family name (provided by the user)
* with a specific CSS class (as documented in the providing icon font)
* and corresponding icon name (documented in the icon font).
* NOTE: Material is already the default family.
*/
iconService.setFamily('material', { className: 'material-icons', type: 'liga' });
iconService.setFamily('fa-solid', { className: 'fas', type: 'font', prefix: 'fa' });
위의 예는 'material'과 'fa-solid'라는 두 개의 아이콘 패밀리를 만듭니다. 그들의 유형은 다르며, material 가족은 등록 liga 되어 있고 fa-solid 가족은 등록 font 되어 있습니다. 둘의 차이점은 구성 요소가 렌더링하는 방식입니다 igx-icon. 일반적으로 Font Awesome은 클래스 이름을 사용하여 글꼴 모음에 대한 코드 포인트를 지정하므로 유형을 다음으로 font 설정합니다. 아이콘을 렌더링하기 위해 코드 포인트에 의존해야 할 때마다 유형을 다음으로 설정해야 합니다 font. 재질 아이콘 패밀리는 여전히 글꼴 패밀리이지만 아이콘을 표시하는 표준 방법은 특정 코드 포인트를 가리키는 클래스 이름 대신 이름을 제공하는 ligature 것입니다. 이러한 이유로 유형을 로 설정해야 합니다 liga. 세 번째 패밀리 유형은 svg Icon Service를 통해 등록된 SVG로 구성되는 아이콘 패밀리용으로 예약되어 있습니다.
위의 두 글꼴 패밀리를 등록했으므로 이제 구성 요소를 통해 표준화된 방식으로 해당 아이콘을 사용할 수 있습니다. igx-icon
<igx-icon family="material" name="home"></igx-icon>
<igx-icon family="fa-solid" name="car"></igx-icon>
패밀리의 경우 material 합자를 name 이름으로 사용하는 반면, 패밀리의 fa-solid 경우 for 이름을 fa-car 지정 className 하지만 이전 단계에서 아이콘 패밀리를 등록할 때 지정한 접두사를 삭제 fa-한다는 것을 눈치채셨을 것입니다.
Adding SVG Icons
Ignite UI for Angular Icon 서비스를 사용하면 SVG 이미지를 패밀리와 연결하고 글꼴 기반 아이콘과 동일한 방식으로 구성 요소를 통해 igx-icon 포함될 수 있도록 이름을 지정할 수 있습니다. SVG는 문자열 또는 SVG 자산에 대한 절대 URI를 통해 확인되어야 합니다.
// Add a new 'material' icon called 'my-icon' from an SVG file
iconService.addSvgIcon('my-icon', 'my-icon.svg', 'material');
// Add a new 'fa-solid' icon called 'my-icon' from string
iconService.addSvgIconFromText('my-icon', '<svg>...</svg>', 'fa-solid');
마크 업의 뒷부분 :
<igx-icon family="material" name="my-icon"></igx-icon>
<igx-icon family="fa-solid" name="my-icon"></igx-icon>
사용자 정의 SVG 아이콘을 and font 유형의 liga 패밀리에 추가하고 있습니다. 이는 and addSvgIconFromText 메서드가 아이콘을 암시적으로 type으로 svg 등록하여 구성 요소가 SVG를 올바르게 렌더링할 수 있도록 하기 igx-icon 때문에 addSvgIcon 가능합니다.
Meta Families
Ignite UI for Angular 아이콘 서비스를 사용하면 글꼴 아이콘 패밀리를 설정하거나 공통 우산 아래에 SVG를 추가하여 추가된 아이콘을 더 쉽게 참조할 수 있도록 하는 의사 패밀리 맵을 만들 수 있습니다.
// The `setIconRef` sets an icon reference in the icon map,
// assuming material and fa-solid have been added as families,
iconService.setIconRef('home', 'my-family', { family: 'material', name: 'home' });
iconService.setIconRef('home-alt', 'my-family', { family: 'fa-solid', name: 'home' });
iconService.setIconRef('car', 'my-family', { family: 'fa-solid', name: 'car' });
마크 업의 뒷부분 :
<igx-icon family="my-family" name="home"></igx-icon>
<igx-icon family="my-family" name="home-alt"></igx-icon>
<igx-icon family="my-family" name="car"></igx-icon>
Icon Retrieval
원래 아이콘을 family type name 읽기 위해 주어진 family 아이콘과 아이콘 name에 대한 아이콘을 가져올 수 있습니다. className
const { family, className, name, type } = iconService.getIcon('my-family', 'car');
console.log(family); // -> 'fa-solid'
console.log(className); // -> 'fas'
console.log(name); // -> 'fa-car'
console.log(type); // -> 'font'
Internal Usage
Ignite UI for Angular 버전 18.1.0부터 아이콘 서비스에서 새로운 아이콘 패밀리를 만들고 CSS 클래스, 유형 및 접두사와 연결할 수 있는 새로운 setFamily 메서드를 추가했습니다. 또한 내부적으로 사용되는 아이콘은 이제 모두 별칭이 지정된 이름을 가진 새 default 패밀리에서 참조로 선언됩니다(아래 표 참조).
| 별명 | 대상 아이콘 | Target Family |
|---|---|---|
| add | add | material |
| add_child | 자식 추가 | imx-icons |
| add_row | 행 추가 | imx-icons |
| arrow_back | arrow_back | material |
| arrow_drop_down | arrow_drop_up | material |
| arrow_forward | arrow_forward | material |
| arrow_next | chevron_right | material |
| arrow_prev | chevron_left | material |
| case_sensitive | case-sensitive | imx-icons |
| carousel_next | arrow_forward | material |
| carousel_prev | arrow_back | material |
| chevron_left | chevron_left | material |
| chevron_right | chevron_right | material |
| 시계 | access_time | material |
| 닫다 | 닫다 | material |
| 무너지다 | 확장_없음 | material |
| 확인하다 | 확인하다 | material |
| date_range | date_range | material |
| 삭제하다 | delete | material |
| drag_indicator | drag_indicator | material |
| 편집하다 | 편집하다 | material |
| 오류 | 오류 | material |
| 넓히다 | 확장_자세히 | material |
| expand_more | 확장_자세히 | material |
| file_download | file_download | material |
| filter_all | 모두 선택 | imx-icons |
| filter_before | 이전-이전 | imx-icons |
| filter_contains | 포함 | imx-icons |
| filter_does_not_contain | 포함하지 않음 | imx-icons |
| filter_empty | 비어 있음 | imx-icons |
| filter_equal | 같음 | imx-icons |
| filter_false | 거짓입니다. | imx-icons |
| filter_greater_than | 보다 큼 | imx-icons |
| filter_greater_than_or_equal | 크거나 같음 | imx-icons |
| filter_in | IS-IN (인-인) | imx-icons |
| filter_last_month | 지난달 | imx-icons |
| filter_last_year | 지난해 | imx-icons |
| filter_less_than | 보다 작음 | imx-icons |
| filter_less_than_or_equal | 보다 작거나 같음 | imx-icons |
| filter_next_month | 다음 달 | imx-icons |
| filter_next_year | 내년 | imx-icons |
| filter_not_empty | 비어 있지 않음 | imx-icons |
| filter_not_equal | 같지 않음(not-equal) | imx-icons |
| filter_not_null | null이 아님 | imx-icons |
| filter_null | is-null (영문) | imx-icons |
| filter_starts_with | 다음으로 시작 | imx-icons |
| filter_this_month | 이달의 경우 | imx-icons |
| filter_this_year | 올해 | imx-icons |
| filter_today | 오늘 | imx-icons |
| filter_true | is-true (참) | imx-icons |
| filter_yesterday | 어제 | imx-icons |
| first_page | 첫 페이지 | material |
| group_work | 그룹 과제 | material |
| 숨기다 | 가시성_꺼짐 | material |
| import_export | 수입 수출 | material |
| input_collapse | arrow_drop_up | material |
| input_clear | 분명한 | material |
| input_expand | arrow_drop_down | material |
| jump_down | 점프 다운 | imx-icons |
| jump_up | 점프 업 | imx-icons |
| last_page | 마지막 페이지 | material |
| more_vert | more_vert | material |
| 다음 | navigate_next | material |
| 핀 | 핀 왼쪽 | imx-icons |
| 이전 | navigate_before | material |
| 리프레쉬 | 새로 고치다 | material |
| 제거하다 | 취소 | material |
| 검색 | 찾다 | material |
| 선택한 | 완료 | material |
| 보이다 | 시계 | material |
| sort_asc | arrow_upward | material |
| sort_desc | arrow_downward | material |
| 함수 | 함수 | material |
| table_rows | table_rows | material |
| 오늘 | calendar_today | material |
| tree_collapse | 확장_자세히 | material |
| tree_expand | chevron_right | material |
| unfold_less | 펼치지 않음 | material |
| unfold_more | unfold_more | material |
| 고정 해제 | 왼쪽 고정 해제 | imx-icons |
| view_column | view_column | material |
사용자 지정 템플릿을 만드는 것과 달리 참조로 내부 아이콘을 변경하는 이점을 활용하려면 다음을 수행하여 콤보에서 확장/축소 아이콘을 교체하고 구성 요소를 선택할 수 있습니다.
iconService.setIconRef('input_expand', 'default', {
name: 'arrow_downward',
family: 'material',
});
iconService.setIconRef('input_collapse', 'default', {
name: 'arrow_upward',
family: 'material',
});
이렇게 하면 확장 및 축소 아이콘 arrow_downward arrow_upward이 모든 콤보 및 선택 구성 요소에 대한 글꼴 패밀리에서 material 각각 및 합자로 설정됩니다.
다음은 각 구성 요소에서 사용하는 모든 아이콘에 대한 분석입니다.
액션 스트립
| 상 | 설명 |
|---|---|
| add_child | 팝업 메뉴에서 사용됩니다. |
| add_row | 팝업 메뉴에서 사용됩니다. |
| more_vert | 팝업 메뉴에서 사용됩니다. |
달력
| 상 | 설명 |
|---|---|
| arrow_prev | 월/년 사이를 탐색하기 위해 헤더에서 사용됩니다. |
| arrow_next | 월/년 사이를 탐색하기 위해 헤더에서 사용됩니다. |
회전목마
| 상 | 설명 |
|---|---|
| carousel_prev | 슬라이드 사이를 탐색하는 데 사용됩니다. |
| carousel_next | 슬라이드 사이를 탐색하는 데 사용됩니다. |
칩
| 상 | 설명 |
|---|---|
| 선택한 | 칩이 선택되었음을 나타내는 데 사용됩니다. |
| 제거하다 | 제거 버튼에 사용됩니다. |
콤보 (심플 콤보 포함)
| 상 | 설명 |
|---|---|
| case_sensitive | 대/소문자 구분 필터링을 표시하고 전환하는 데 사용됩니다. |
| input_clear | 지우기 버튼에 사용됩니다. |
| input_expand | 콤보 메뉴가 축소되어 있을 때 토글 버튼에 사용됩니다. |
| input_collapse | 콤보 메뉴가 확장될 때 토글 버튼에 사용됩니다. |
날짜 선택기
| 상 | 설명 |
|---|---|
| 오늘 | 선택기를 트리거하는 토글 버튼에 사용됩니다. |
| input_clear | 지우기 버튼에 사용됩니다. |
날짜 범위 선택기
| 상 | 설명 |
|---|---|
| date_range | 선택기를 트리거하는 토글 버튼에 사용됩니다. |
확장 패널
| 상 | 설명 |
|---|---|
| 넓히다 | 확장된 상태를 트리거하는 토글 버튼에 사용됩니다. |
| 무너지다 | 축소된 상태를 트리거하는 토글 단추에 사용됩니다. |
그리드
| 상 | 설명 |
|---|---|
| add | 필터 항목을 추가하기 위해 excel-filter 메뉴에서 사용됩니다. |
| arrow_back | 열을 뒤로 이동하기 위해 다양한 UI 요소에서 사용됩니다. |
| arrow_drop_down | 토글 가능한 메뉴를 나타내기 위해 다양한 버튼에 사용됩니다. |
| arrow_forward | 열을 앞으로 이동하기 위해 다양한 UI 요소에서 사용됩니다. |
| 취소 | 작업을 취소하기 위해 다양한 UI 요소에 사용됩니다. |
| chevron_right | Excel 스타일 필터링과 같이 확장 가능한 메뉴를 나타내는 데 사용됩니다. |
| 닫다 | 확장된 메뉴를 닫는 데 사용됩니다. |
| 확인하다 | 작업을 확인하는 데 사용됩니다. |
| drag_indicator | 항목을 끌 수 있음을 나타내는 핸들을 표시하는 데 사용됩니다. |
| 오류 | 잘못된 데이터 입력을 나타내기 위해 편집 가능한 셀에 사용됩니다. |
| expand_more | Excel 필터링 메뉴에서 더 많은 필터 추가를 나타내는 데 사용됩니다. |
| file_dowload | Excel 필터 내보내기에서 사용됩니다. |
| filter_* | 다양한 필터링 피연산자에 사용됩니다. |
| group_work | 그룹화 기준 끌어 놓기 영역에서 사용됩니다. |
| 숨기다 | 열을 숨기기 위해 다양한 UI 요소에서 사용됩니다. |
| import_export | 이동을 위해 피벗 데이터 선택기에서 사용됩니다. |
| input_clear | 입력 데이터를 지우기 위해 입력 필드에서 사용됩니다. |
| 다음 | 필터링 행 메뉴에서 칩 사이를 탐색하는 데 사용됩니다. |
| 핀 | 열 고정을 위해 다양한 UI 요소에서 사용됩니다. |
| 이전 | 필터링 행 메뉴에서 칩 사이를 탐색하는 데 사용됩니다. |
| 제거하다 | 다양한 UI 요소에서 제거 표시기로 사용됩니다. |
| 리프레쉬 | 필터링 행 메뉴에서 필터를 다시 로드하는 데 사용됩니다. |
| 선택한 | 활성 선택을 나타내기 위해 다양한 UI 요소에서 사용됩니다. |
| 보이다 | 열을 표시하기 위해 다양한 UI 요소에서 사용됩니다. |
| sort_asc | 정렬 방향을 나타내기 위해 다양한 UI 요소에서 사용됩니다. |
| sort_desc | 정렬 방향을 나타내기 위해 다양한 UI 요소에서 사용됩니다. |
| 함수 | 피벗 그리드 및 데이터 선택기에서 사용됩니다. |
| table_rows | 피벗 그리드 데이터 선택기에서 사용됩니다. |
| tree_collapse | 나무와 같은 구조에서 세부 정보를 덜 표시하는 데 사용됩니다. |
| tree_expand | 나무와 같은 구조에서 더 많은 세부 정보를 표시하는 데 사용됩니다. |
| 고정 해제 | 열 고정을 위해 다양한 UI 요소에서 사용됩니다. |
| unfold_less | 계층적 그리드에서 모든 행을 축소하는 데 사용됩니다. |
| unfold_more | 계층적 그리드에서 모든 행을 확장하는 데 사용됩니다. |
| view_column | 피벗 데이터 선택기에서 사용됩니다. |
입력 그룹
| 상 | 설명 |
|---|---|
| input_clear | 지우기 버튼에 사용됩니다. |
페이지네이터
| 상 | 설명 |
|---|---|
| first_page | 첫 번째 페이지로 이동하는 데 사용되는 단추에서 사용됩니다. |
| last_page | 마지막 페이지로 이동하는 데 사용되는 단추에서 사용됩니다. |
| 이전 | 이전 페이지로 이동하는 데 사용되는 단추에서 사용됩니다. |
| 다음 | 다음 페이지로 이동하는 데 사용되는 단추에서 사용됩니다. |
쿼리 빌더
| 상 | 설명 |
|---|---|
| add | 새 필터 항목을 추가하기 위해 단추에서 사용됩니다. |
| 닫다 | 상황에 맞는 메뉴를 닫는 단추에서 사용됩니다. |
| 편집하다 | 필터 항목을 편집하기 위해 단추에서 사용됩니다. |
| 확인하다 | 단추에서 새 필터 항목 추가를 확인하는 데 사용됩니다. |
| 그룹 해제 | 단추에서 필터 항목을 그룹 해제하는 데 사용됩니다. |
| 삭제하다 | 단추에서 필터 항목을 삭제하는 데 사용됩니다. |
| filter_* | 다양한 필터링 피연산자에 사용됩니다. |
선택하다
| 상 | 설명 |
|---|---|
| input_expand | 선택 메뉴가 축소되어 있을 때 토글 버튼에 사용됩니다. |
| input_collapse | 선택 메뉴가 확장될 때 토글 버튼에 사용됩니다. |
탭
| 상 | 설명 |
|---|---|
| 이전 | 이전 탭으로 이동하는 데 사용되는 단추에서 사용됩니다. |
| 다음 | 다음 탭으로 이동하는 데 사용되는 단추에서 사용됩니다. |
시간 선택기
| 상 | 설명 |
|---|---|
| 시계 | 선택기를 트리거하는 토글 버튼에 사용됩니다. |
나무
| 상 | 설명 |
|---|---|
| tree_expand | 선택기를 트리거하는 토글 버튼에 사용됩니다. |
| tree_collapse | 선택기를 트리거하는 토글 버튼에 사용됩니다. |
API
다음은 Ignite UI for Angular Icon 서비스를 통해 사용할 수 있는 모든 방법에 대한 간략한 요약입니다.
Add Family
setFamily(name: string, meta: IconFamilyMeta): IgxIconService;
Icon References
아이콘 맵이 아직 없는 경우에만 설정합니다.
addIconRef(name: string, family: string, icon: IconMeta): void;
아이콘 맵에서 Icon 참조를 설정합니다(이미 있는 경우 재정의됨).
setIconRef(name: string, family: string, icon: IconMeta): void;
Get 및 Icon 참조
getIconRef(family: string, name: string): IconReference;
SVG Icons
URI에서:
addSvgIcon(name: string, url: string, family: string, stripMeta = false): void;
문자열에서:
addSvgIconFromText(name: string, iconText: string, family: string, stripMeta = false): void;
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub