Angular 아이콘 구성 요소 개요

Ignite UI for Angular 아이콘/글꼴 패밀리를 통합하여 개발자가 이를 상호 교환하여 사용하고 마크업에 머티리얼 아이콘을 추가할 수 있도록 합니다.

Angular Icon Example

Getting Started with Ignite UI for Angular Icon

Ignite UI for Angular Icon 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

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 {}

또는 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';
}

이제 Ignite UI for Angular 아이콘 모듈이나 구성 요소를 가져왔으므로 igx-icon 구성 요소를 사용할 수 있습니다.

Using the Angular Icon

Icon Color

​style.color CSS 속성을 사용하여 기본 색상을 변경하세요.

<igx-icon [style.color]="#e41c77">home</igx-icon>

Inactive Icon

아이콘을 비활성화하려면 active 속성을 사용하면 됩니다.

<igx-icon [active]="false">volume_off</igx-icon>

Content Projection

콘텐츠 투영을 통해 아이콘을 설정할 수 있습니다.

<igx-icon>bluetooth</igx-icon>

Icon Size

CSS를 사용하여 아이콘을 사용자 정의할 수 있습니다. 아이콘 크기를 변경하려면--size CSS 변수를 사용하세요.

.custom-size {
  --size: 56px;
}

SVG Icons

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');
}

<igx-icon name="contains" family="filter-icons"></igx-icon>

Material Symbols

또한 사용자는 새로 생성된 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"/>

그런 다음 종속성을 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' });
}

이제 원하는 아이콘을 마크업에 추가하고 조정 가능한 글꼴 스타일을 사용하여 사용자 정의할 준비가 되었습니다.

<igx-icon family="material-symbols" name="diamond" class="custom-icon"></igx-icon>

.custom-icon {
  font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 40;
}

머티리얼 심볼 스타일에 대해 자세히 알아보려면 해당 official documentation 방문하세요.

Server-side Rendering Note

Note

Angular Universal을 사용하여 애플리케이션에서 서버 측 렌더링 논리를 구현하고 아이콘을 등록하는 데 사용한 IgxIconService 경우 다음과 같은 예외가 발생할 수 있습니다.

> XMLHttpRequest is not defined. Could not fetch SVG from url. >

이를 방지하려면 다음 단계를 실행하십시오.

1. `xmlhttprequest`를 설치합니다:

   npm i xmlhttprequest
   

2. `server.ts` 파일 상단에 다음을 추가하세요.

   (global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
   

스타일링

아이콘 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

가장 간단한 접근 방식에 따라 icon-theme 확장하고 원하는 대로 아이콘을 사용자 지정하는 데 필요한 매개 변수를 허용하는 새 테마를 만듭니다.

$custom-icon-theme: icon-theme(
  $color: #1481b8,
  $disabled-color: #494949,
);

마지막 단계는 애플리케이션에 사용자 정의 아이콘 테마를 전달하는 것입니다.

@include css-vars($custom-icon-theme);

Demo

SVG Limitations

사용자 정의 SVG 아이콘을 icon-theme 사용할 때 요소 자체에만 <svg> 색상을 적용하고 덮어쓸 수 있다는 점에 유의하는 것이 중요합니다. SVG에 하드코딩된 색상 값이 있는 , <rect>,, <circle>, <g>와 같은 <path> 하위 요소가 포함되어 있는 경우 해당 색상은 테마에서 재정의할 수 없습니다.

예를 들어:

<svg>
    <path fill="#050d42"/>
</svg>

이 경우 아이콘은 테마에서 제공하는 색상에 관계없이 항상 에 정의된 <path> 색상을 사용합니다 #050d42.

<svg fill="#050d42">
    <path .../>
</svg>

여기서 fill color는 요소에 적용 <svg> 되므로 를 통해 icon-theme 제공되는 사용자 정의 색상으로 재정의할 수 있습니다.

SVG 자식 요소에는 하드코딩된 색상을 사용하지 않는 것이 좋으므로 아이콘을 사용하여 완전히 icon-theme 스타일을 지정할 수 있습니다. 그러나 하드 코드된 색을 자식 요소에 적용하려는 경우 Ignite UI 색 변수를 사용할 수도 있습니다.

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <!-- This element uses the theme color from the igx-icon component -->
  <path d="M12 2L15 8H9L12 2Z" />

  <!-- This element uses an accent color from Ignite UI palette -->
  <circle cx="12" cy="17" r="4" fill="var(--ig-primary-500)" />
</svg>

Custom sizing

변수를 사용하여--size 다음을 직접 타겟팅 할 수 있습니다. igx-icon​

igx-icon {
  --size: 50px;
}

또는 universal--igx-icon-size 변수를 사용하여 모든 인스턴스를 타겟팅 할 수 있습니다.

<div class="my-app">
  <igx-icon></igx-icon>
</div>

.my-app {
  --igx-icon-size: 50px;
}

미리 정의된 크기 중 하나를 사용하여 변수에 할당할 수도 있습니다--ig-size. 에--ig-size 사용할 수 있는 값은 다음과 같습니다--ig-size-small.--ig-size-large​--ig-size-medium​

igx-icon {
  --ig-size: var(--ig-size-medium);
}

​크기 문서에서 자세히 알아보세요.

API References

• IgxIconComponent
• IgxIconComponent 스타일

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular