Angular 아이콘 구성 요소 개요
Ignite UI for Angular 아이콘/글꼴 패밀리를 통합하여 개발자가 이를 상호 교환하여 사용하고 마크업에 머티리얼 아이콘을 추가할 수 있도록 합니다.
Angular 아이콘 예제
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
Ignite UI for Angular Icon 시작하기
Ignite UI for Angular Icon 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.
ng add igniteui-angular
cmd
Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.
다음 단계는 IgxIconModule
당신의 app.module.ts 파일.
// app.module.ts
import { IgxIconModule } from 'igniteui-angular';
// import { IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
imports: [
...
IgxIconModule,
...
]
})
export class AppModule {}
typescript
또는 16.0.0
부터 IgxIconComponent
독립형 종속성으로 가져올 수 있습니다.
// home.component.ts
import { IgxIconComponent } from 'igniteui-angular';
// import { IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: '<igx-icon [style.color]="color">home</igx-icon>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxIconComponent],
})
export class HomeComponent {
public color = '#e41c77';
}
typescript
이제 Ignite UI for Angular 아이콘 모듈이나 구성 요소를 가져왔으므로 igx-icon
구성 요소를 사용할 수 있습니다.
Angular 아이콘 사용
아이콘 색상
style.color
CSS 속성을 사용하여 기본 색상을 변경하세요.
<igx-icon [style.color]="#e41c77">home</igx-icon>
html
비활성 아이콘
아이콘을 비활성화하려면 active
속성을 사용하면 됩니다.
<igx-icon [active]="false">volume_off</igx-icon>
html
콘텐츠 프로젝션
콘텐츠 투영을 통해 아이콘을 설정할 수 있습니다.
<igx-icon>bluetooth</igx-icon>
html
아이콘 크기
CSS를 사용하여 아이콘을 사용자 정의할 수 있습니다. 아이콘 크기를 변경하려면--size
CSS 변수를 사용하세요.
.custom-size {
--size: 56px;
}
scss
SVG 아이콘
SVG 이미지를 아이콘으로 사용할 수도 있습니다. 먼저 IgxIconService
종속성을 삽입합니다. 이 예에서는 이를 구성 요소의 생성자에 삽입하지만 코드에서 필요할 때마다 사용할 수 있습니다.
addSvgIcon
메서드를 사용하여 캐시에 있는 SVG 파일을 가져옵니다. SVG가 캐시되면 애플리케이션의 어느 곳에서나 사용할 수 있습니다. 아이콘 이름과 파일 URL 경로는 메소드의 필수 매개변수입니다. 가족도 지정할 수 있습니다. 그런 다음 HTML 마크업에서 SVG 파일을 사용할 수 있습니다. 또는 addSvgIconFromText
메서드를 사용하여 SVG 파일을 가져와서 파일 URL 대신 SVG 텍스트 콘텐츠를 제공할 수 있습니다.
- 동일한 이름과 동일한 계열을 가진 두 개의 아이콘이 있는 경우 SVG 아이콘이 우선적으로 표시됩니다.
- SVG 파일에는 이미지 너비와 높이를 제공하지 않는 것이 좋습니다.
- Internet Explorer의 경우 추가 폴리필 스크립트("폴리필")가 필요할 수 있습니다.
constructor(private iconService: IgxIconService) { }
public ngOnInit() {
// register custom SVG icons
this.iconService.addSvgIcon('contains', '/assets/images/svg/contains.svg', 'filter-icons');
}
typescript
<igx-icon name="contains" family="filter-icons"></igx-icon>
html
재료 기호
또한 사용자는 새로 생성된 Material Symbols Library
에 포함된 최신 Material 아이콘과 디자인 변형을 활용할 수 있습니다. 머티리얼 심볼을 사용하려면 먼저 애플리케이션에 라이브러리를 추가해야 합니다.
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet"/>
html
그런 다음 종속성을 IgxIconService
주입하고 해당 메서드를 사용하여 setFamily
Material Symbols가 다음과 같이 igx-icon
작동할 수 있도록 해야 합니다.
constructor(private iconService: IgxIconService) { }
public ngOnInit() {
// registers a 'material-symbols-outlined' class to be applied to all igx-icons with 'material-symbols' font-family
this.iconService.setFamily('material-symbols', { className: 'material-symbols-outlined', type: 'liga' });
}
ts
이제 원하는 아이콘을 마크업에 추가하고 조정 가능한 글꼴 스타일을 사용하여 사용자 정의할 준비가 되었습니다.
<igx-icon family="material-symbols" name="diamond" class="custom-icon"></igx-icon>
html
.custom-icon {
font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 40;
}
scss
머티리얼 심볼 스타일에 대해 자세히 알아보려면 해당 official documentation
방문하세요.
서버 측 렌더링 참고 사항
Angular Universal을 사용하여 애플리케이션에서 서버 측 렌더링 논리를 구현하고 아이콘을 등록하는 데 사용한 IgxIconService
경우 다음과 같은 예외가 발생할 수 있습니다.
> XMLHttpRequest is not defined. Could not fetch SVG from url.
>
이를 방지하려면 다음 단계를 실행하십시오.
- `xmlhttprequest`를 설치합니다:
npm i xmlhttprequest
cmd - `server.ts` 파일 상단에 다음을 추가하세요.
(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
typescript
스타일링
아이콘 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index
파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss
가장 간단한 접근 방식에 따라 icon-theme
확장하고 원하는 대로 아이콘을 사용자 지정하는 데 필요한 매개 변수를 허용하는 새 테마를 만듭니다.
$custom-icon-theme: icon-theme(
$color: #1481b8,
$disabled-color: #494949,
);
scss
마지막 단계는 애플리케이션에 사용자 정의 아이콘 테마를 전달하는 것입니다.
@include css-vars($custom-icon-theme);
scss
데모
사용자 지정 크기 조정
변수를 사용하여--size
다음을 직접 타겟팅 할 수 있습니다. igx-icon
igx-icon {
--size: 50px;
}
scss
또는 universal--igx-icon-size
변수를 사용하여 모든 인스턴스를 타겟팅 할 수 있습니다.
<div class="my-app">
<igx-icon></igx-icon>
</div>
html
.my-app {
--igx-icon-size: 50px;
}
scss
미리 정의된 크기 중 하나를 사용하여 변수에 할당할 수도 있습니다--ig-size
. 에--ig-size
사용할 수 있는 값은 다음과 같습니다--ig-size-small
.--ig-size-large
--ig-size-medium
igx-icon {
--ig-size: var(--ig-size-medium);
}
scss
크기 문서에서 자세히 알아보세요.
API 참조
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.