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

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

<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를 사용해 커스터마이즈할 수 있습니다. 아이콘 크기를 변경하려면 CSS 변수를 사용하세요--size:

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

SVG Icons

SVG 이미지를 아이콘으로 사용할 수도 있습니다. 먼저, 의존성을IgxIconService 주입하세요. 이 예시에서는 컴포넌트의 구성자에 주입하지만, 코드에서 필요한 곳 어디서든 사용할 수 있습니다.

캐시에 SVG 파일을 가져오는 메서드를 사용addSvgIcon 하세요. 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 아이콘과 그 디자인 변형을 활용할 수 있습니다. Material Symbols를 사용하려면 먼저 라이브러리를 애플리케이션에 추가해야 합니다:

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

Material Symbols 스타일에 대해 더 알고 싶으시면 그들의official documentation 사이트를 방문해 주세요.

Server-side Rendering Note

Note

만약 Angular Universal 사용으로 애플리케이션 내에서 서버 측 렌더링 로직을 구현하고 to register 아이콘을 사용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에 하드코딩된 색상 값을 가진 자식 요소가<path> 포함되어 있다면,<rect>​<circle>​<g> 해당 색상은 테마에 의해 덮어쓸 수 없습니다.

예를 들어:

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

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

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

여기서는 채우기 색상이 요소에<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;
}

또는 모든 인스턴스를 타겟팅하는 유버설--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-medium​--ig-size-large​

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

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

Styling with Tailwind

저희 맞춤형 Tailwind 유틸리티 클래스를 사용해 스타일icon 링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.

전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.

• 라이트 테마에는 클래스를 사용light-* 하세요.
• 어두운 테마에는 클래스를 사용dark-* 하세요.
• 접두사 뒤에 컴포넌트 이름을 덧붙이세요,light-icon​dark-icon 예: .

이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.

전체 속성 목록은 아이콘 테마에서 확인할 수 있습니다. 문법은 다음과 같습니다:

<igx-icon class="!light-icon ![--color:#7B9E89] ![--size:48px]">person</igx-icon>

Note

느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

마지막에 아이콘은 다음과 같이 보여야 합니다:

API References

• IgxIconComponent
• IgxIconComponent 스타일

Additional Resources

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

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