Поиск по сайту:

Как использовать пользовательские иконки SVG в Angular Material


Введение

Библиотека материалов Angular предлагает набор компонентов Angular, оформленных в стиле Material Design. Одним из таких компонентов является компонент . Существует широкий выбор готовых иконок для материалов. Но что, если мы хотим отображать некоторые пользовательские значки, оставаясь при этом в соответствии со стилем Material Design? Давайте узнаем, как использовать наши собственные иконки SVG в компонентах Angular Material.

В этом руководстве вы будете использовать компонент для использования стандартного шрифта 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

Затем добавьте import для MatIconModule:

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]
})

Теперь вы можете использовать встроенные значки материалов с компонентом . Если вы добавите текстовое имя для значка, он отобразит соответствующий глиф значка.

В нашем уроке мы добавим значок настроение (он напоминает символ улыбающегося лица):

На веб-сайте Material Design есть полный список значков материалов, которые вы можете использовать напрямую.

Откройте файл app.component.html:

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

Замените содержимое файла следующей строкой кода:

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

Давайте посмотрим, что у нас есть на данный момент! Запустите приложение:

  1. ng serve

Просмотрите приложение в веб-браузере (localhost:4200), и вы увидите значок mood.

На этом завершается использование для отображения иконочных шрифтов. Мы можем продолжить использовать для отображения SVG.

Шаг 3 — Использование с SVG

Давайте добавим в наш проект собственный значок единорог.

Примечание. Можно приобрести значки SVG единорога в The Noun Project. Бесплатное базовое использование должно указывать создателя значка в соответствии с требованиями лицензии.

Сохраните значок как unicorn_icon.svg в папке src/assets вашего проекта.

Чтобы использовать наш собственный значок единорога с тегом компонента , нам нужно импортировать HttpClientModule.

Откройте файл app.module.ts:

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

Затем добавьте import для HttpClientModule:

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]
})

Теперь мы можем зарегистрировать наш пользовательский значок единорог с помощью службы MatIconRegistry, предоставляемой Angular Material.

Откройте app.component.ts:

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

Затем добавьте import для MatIconRegistry:

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

И добавляем инъекцию сервиса в компонент:

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

Добавьте метод addSvgIcon в метод constructor компонента:

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

Метод addSvgIcon регистрирует нашу иконку, принимая два аргумента.

Первый аргумент — это метка значка, имеющая тип string.

Второй аргумент — это относительный URL-адрес, указывающий на расположение файла значка.

Эта строка пути URL имеет тип SafeResourceUrl. Чтобы преобразовать строку пути URL в SafeResourceUrl, мы можем использовать DomSanitizer, предоставляемый Angular.

Затем добавьте import для DomSanitizer:

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, метод bypassSecurityTrustResourceUrl в DomSanitizer вернет безопасный URL-адрес ресурса, который требуется для метода addSvgIcon.

Теперь вы можете заменить icon_label пользовательской меткой единорог. И 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")
    );
  }
}

Теперь пользовательский значок единорог правильно зарегистрирован в службе MatIconRegistry.

Чтобы отобразить пользовательский значок, вам необходимо обновить шаблон компонента. Откройте app.component.html:

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

И передайте метку значка во входное свойство svgIcon :

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

Давайте посмотрим, что у вас есть до сих пор! Запустите приложение:

  1. ng serve

Просмотрите приложение в веб-браузере (localhost:4200), и вы увидите, что пользовательский значок отображается в стиле Material.

Теперь вы можете отображать полный набор пользовательских значков в своих приложениях с помощью стилей Material.

Чтобы сделать код чище и удобнее в сопровождении, мы можем провести рефакторинг кода, переместив MatIconRegistry в сервисный класс.

Заключение

В этом руководстве вы завершили начальное изучение использования компонента Angular Material со шрифтом Material Icons и пользовательскими SVG. Это позволяет поддерживать последовательное соблюдение стилей Material Design во всем приложении.

Если вы хотите узнать больше об Angular, ознакомьтесь с нашей темой по Angular, где вы найдете упражнения и проекты по программированию.

Если вы хотите узнать больше о Material Design, ознакомьтесь с официальной документацией.