웹사이트 검색

Angular Material에서 사용자 지정 SVG 아이콘을 사용하는 방법


소개

Angular Material 라이브러리는 Material Design으로 스타일이 지정된 Angular 구성 요소 모음을 제공합니다. 이러한 구성 요소 중 하나는 구성 요소입니다. 다양한 기성 재질 아이콘이 있습니다. 그러나 머티리얼 디자인 스타일과 일관성을 유지하면서 일부 사용자 지정 아이콘을 표시하려면 어떻게 해야 할까요? Angular Material 구성 요소에서 자체 SVG 아이콘을 사용하는 방법을 알아보겠습니다.

이 자습서에서는 구성 요소를 사용하여 표준 Material Icons 글꼴을 사용합니다. 그런 다음 구성 요소를 사용하여 사용자 지정 SVG 아이콘을 지원합니다.

전체 작업 코드는 이 GitHub 저장소에서 찾을 수 있습니다.

전제 조건

이 자습서를 완료하려면 다음이 필요합니다.

  • Node.js를 로컬에 설치했습니다. Node.js를 설치하고 로컬 개발 환경을 만드는 방법에 따라 수행할 수 있습니다.

이 게시물은 Angular v4.2+에 대한 기본 지식이 있다고 가정합니다.

이 튜토리얼은 원래 Angular v5.2+ 및 Angular Material v5.2.4로 작성되었습니다.

이 튜토리얼은 Angular v10.0.5 및 Angular Material v10.1.1에서 검증되었습니다.

Angular Material을 시작하는 경우 이 게시물을 참조할 수 있습니다.

1단계 - Angular 프로젝트 생성 및 종속성 설치

먼저 터미널을 열고 새 프로젝트 디렉토리를 만듭니다.

  1. mkdir angular-material-custom-svg

그런 다음 새 디렉터리로 이동합니다.

  1. cd angular-material-custom-svg

그런 다음 npm을 사용하여 Angular CLI를 devDependency로 설치합니다.

  1. npm install @angular/cli@10.0.4 --save-dev

이제 Angular CLI를 사용하여 새 Angular 프로젝트를 만들고 이 자습서의 요구 사항에 대한 몇 가지 옵션을 설정할 수 있습니다.

  1. ng new angular-material-custom-svg --directory=. --skipTests=true --routing=false --style=css

이렇게 하면 현재 디렉터리에 새로운 Angular 프로젝트가 생성됩니다. 다음 명령을 사용하여 Angular Material과 해당 종속 항목을 설치해 보겠습니다.

  1. npm install @angular/material@10.1.1 @angular/cdk@10.1.1 --save

이것으로 튜토리얼 프로젝트 설정을 마칩니다. 이제 프로젝트에서 머티리얼 아이콘을 계속 사용할 수 있습니다.

2단계 - 아이콘 글꼴과 함께 사용

기본 머티리얼 아이콘을 사용하려면 먼저 글로벌 스타일시트에서 가져와야 합니다. 이렇게 하려면 styles.css 파일(Angular CLI에서 생성됨)을 엽니다.

  1. nano src/styles.css

파일의 내용을 다음 import 문으로 바꿉니다.

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

다음으로 MatIconModule을 가져와야 합니다. app.module.ts 파일을 엽니다.

  1. nano src/app.module.ts

그런 다음 MatIconModule에 대한 import를 추가합니다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatIconModule } from "@angular/material/icon";

그리고 모듈의 imports 배열에 추가합니다.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

이제 내장된 재질 아이콘을 구성 요소와 함께 사용할 수 있습니다. 아이콘에 텍스트 이름을 추가하면 관련 아이콘 글리프가 표시됩니다.

튜토리얼에서는 \기분\ 아이콘을 추가할 것입니다(웃는 얼굴의 상징과 비슷함).

머티리얼 디자인 웹사이트에는 직접 사용할 수 있는 머티리얼 아이콘의 전체 목록이 있습니다.

app.component.html 파일을 엽니다.

  1. nano src/app/app.component.html

파일의 내용을 다음 코드 줄로 바꿉니다.

<mat-icon>mood</mat-icon>

지금까지 우리가 가진 것을 살펴봅시다! 애플리케이션을 시작합니다.

  1. ng serve

웹 브라우저(localhost:4200)에서 애플리케이션을 보면 \mood\ 아이콘이 표시됩니다.

아이콘 글꼴을 표시하기 위해 를 사용하여 결론을 내립니다. 계속해서 를 사용하여 SVG를 표시할 수 있습니다.

3단계 — SVG와 함께 사용

프로젝트에 맞춤 \unicorn\ 아이콘을 추가해 보겠습니다.

참고: The Noun Project에서 유니콘 SVG 아이콘을 획득할 수 있습니다. 무료 기본 사용은 라이선스 요구 사항에 따라 아이콘 작성자에게 귀속되어야 합니다.

프로젝트의 src/assets 폴더에 아이콘을 unicorn_icon.svg로 저장합니다.

구성 요소 태그와 함께 사용자 지정 유니콘 아이콘을 사용하려면 HttpClientModule을 가져와야 합니다.

app.module.ts 파일을 엽니다.

  1. nano src/app/app.module.ts

그런 다음 HttpClientModule에 대한 import를 추가합니다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatIconModule } from "@angular/material/icon";
import { HttpClientModule } from "@angular/common/http";

그리고 모듈의 imports 배열에 추가합니다.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatIconModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

이제 Angular Material에서 제공하는 MatIconRegistry 서비스에 맞춤형 \unicorn\ 아이콘을 등록할 수 있습니다.

app.component.ts를 엽니다.

  1. nano src/app/app.component.ts

그런 다음 MatIconRegistry에 대한 import를 추가합니다.

import { Component } from "@angular/core";
import { MatIconRegistry } from "@angular/material/icon";

그리고 구성 요소에 서비스 주입을 추가합니다.

export class AppComponent{
  constructor(private matIconRegistry: MatIconRegistry){
    // ...
  }
}

구성 요소의 constructor 메서드에 addSvgIcon 메서드를 추가합니다.

export class AppComponent{
  constructor(private matIconRegistry: MatIconRegistry){
    this.matIconRegistry.addSvgIcon(
      `icon_label`,
      `path_to_custom_icon.svg`
    );
  }
}

addSvgIcon 메서드는 두 개의 인수를 받아 아이콘을 등록합니다.

첫 번째 인수는 문자열 유형의 아이콘 레이블입니다.

두 번째 인수는 아이콘 파일의 위치를 가리키는 상대 URL 경로입니다.

이 URL 경로 문자열은 SafeResourceUrl 유형입니다. URL 경로 문자열을 SafeResourceUrl로 구문 분석하기 위해 Angular에서 제공하는 DomSanitizer를 사용할 수 있습니다.

다음으로 DomSanitizer에 대한 import를 추가합니다.

import { Component } from "@angular/core";
import { MatIconRegistry } from "@angular/material/icon";
import { DomSanitizer } from "@angular/platform-browser";

그리고 구성 요소에 서비스 주입을 추가합니다.

export class AppComponent{
  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ){
    this.matIconRegistry.addSvgIcon(
      `icon_label`,
      `path_to_custom_icon.svg`
    );
  }
}

상대 URL 경로 문자열이 주어지면 DomSanitizerbypassSecurityTrustResourceUrl 메서드는 addSvgIcon 메서드에 필요한 안전한 리소스 URL을 반환합니다.

이제 icon_label을 사용자 지정 unicorn 레이블로 바꿀 수 있습니다. 그리고 path_to_custom_icon.svg와 사용자 정의 unicorn_icon.svg 아이콘이 있습니다.

addSvgIcon의 행을 업데이트해 보겠습니다.

export class AppComponent{
  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ){
    this.matIconRegistry.addSvgIcon(
      "unicorn",
      this.domSanitizer.bypassSecurityTrustResourceUrl("../assets/unicorn_icon.svg")
    );
  }
}

이제 사용자 정의 unicorn 아이콘이 MatIconRegistry 서비스에 제대로 등록되었습니다.

사용자 지정 아이콘을 표시하려면 구성 요소의 템플릿을 업데이트해야 합니다. app.component.html을 엽니다.

  1. nano src/app/app.component.html

그리고 아이콘 레이블을 svgIcon 입력 속성에 전달합니다.

<mat-icon svgIcon="unicorn"></mat-icon>

지금까지 가지고 있는 것을 살펴보겠습니다! 애플리케이션을 시작합니다.

  1. ng serve

웹 브라우저(localhost:4200)에서 애플리케이션을 보면 사용자 지정 아이콘이 재질 스타일로 표시되는 것을 볼 수 있습니다.

이제 머티리얼 스타일을 사용하여 앱에 전체 사용자 지정 아이콘 세트를 표시할 수 있습니다.

코드를 더 깔끔하고 유지 관리하기 쉽게 만들기 위해 MatIconRegistry를 서비스 클래스로 이동하여 코드를 리팩터링할 수 있습니다.

결론

이 자습서에서는 Material Icons 글꼴 및 사용자 지정 SVG와 함께 Angular Material의 구성 요소 사용에 대한 초기 탐색을 완료했습니다. 이는 애플리케이션 전체에서 머티리얼 디자인 스타일을 일관되게 준수할 수 있는 방법을 제공합니다.

Angular에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 Angular 주제 페이지를 확인하십시오.

머티리얼 디자인에 대해 자세히 알아보려면 공식 문서를 확인하세요.