Angular 아이콘 구성 요소 개요

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

    Angular 아이콘 예제

    EXAMPLE
    TS
    HTML
    SCSS

    이 샘플이 마음에 드시나요? 전체 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

    EXAMPLE
    TS
    HTML
    SCSS

    App Builder | CTA 배너

    재료 기호

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

    EXAMPLE
    TS
    HTML
    SCSS

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

    서버 측 렌더링 참고 사항

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

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

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

    1. `xmlhttprequest`를 설치합니다:
      npm i xmlhttprequest
      cmd
    2. `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

    데모

    EXAMPLE
    TS
    HTML
    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 참조

    추가 리소스

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