动态加载并渲染 SVG本地icon

本地添加自定义icon

• 将icon文件放置可访问的静态资源下（angular.json配置好）
• 通过服务方式注册icon

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

/**
 * Used for application startup
 * Generally used to get the basic data of the application, like: Menu Data, User Data, etc.
 */
@Injectable()
export class StartupService {
  constructor(
    private iconSrv: NzIconService,
    private sanitizer: DomSanitizer
  ) {
    // 资源必须配置在assets目录下
    this.loadSvgIcon('inticon:software', 'assets/outline/software.svg');
  }

  // 加载本地svg静态资源;并组注册到NzIconService中。通过angular.json配置。通过assets属性配置本地静态资源
  //     "assets": [
  //            "src/assets",
  //            "src/favicon.ico"
  //      ],
  loadSvgIcon(name: string, url: string): void {
    this.httpClient.get(url, { responseType: 'text' }).subscribe(
      svg => {
        const sanitizedSvg = this.sanitizer.bypassSecurityTrustHtml(svg);
        this.iconSrv.addIconLiteral(name, sanitizedSvg as any);
      }
    );
  }
}

// app.modules.ts
// Angular 启动时，运行 StartupService 的 load 方法，进行需要的初始化操作。
import { StartupService } from '@core';
export function StartupServiceFactory(startupService: StartupService): () => Observable<void> {
  return () => startupService.load();
}
const APPINIT_PROVIDES = [
  StartupService,
  {
    provide: APP_INITIALIZER,
    useFactory: StartupServiceFactory,
    deps: [StartupService],
    multi: true
  }
];
@NgModule({
  declarations: [AppComponent],
  imports: [],
  providers: [...APPINIT_PROVIDES],
  bootstrap: [AppComponent]
})
export class AppModule {}

// 使用
<!-- <i nz-icon nzType="software" nzTheme="outline"></i> -->

// ng-alain配置菜单时，使用
{
          "text": "仪表盘",
          "i18n": "menu.dashboard",
          "icon": "inticon anticon-software"
},

• 下次讲下angular是如何开放本地资源，可通过http访问的。