如何在 Angular 应用程序中 link 到本地 SVG 文件？

Question

我想使用本地 SVG 文件将 Clarity 框架图标替换为我自己的图标。我为此准备了一项服务：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class IconServiceService {

  icons: any = {
    'caret': '<svg viewBox="0 0 100 100"><use xlink:href="file://help.svg#caret"></use></svg>',
  };

  constructor() { }

  public load() {
        window['ClarityIcons'].add(this.icons);
  }
}

当我放置整个 SVG 内容而不是 <use xlink:href="file://help.svg#caret"> 部分时，它会起作用。但是，当我想 link 到本地文件时（如代码所示），我无法获取该文件。我正在使用 Angular 7. 我如何在这里使用本地 SVG 文件？

Answer 1

TypeScript 无法直接加载 SVG 文件等文件。假设您使用的是 Angular CLI，那么您可以像下面这样在 Webpack 构建过程中搭载 raw-loader 来导入原始字符串并将其分配给您的变量。

import * as CaretIcon from 'raw-loader!./path/to/file.svg';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class IconServiceService {

  icons: any = {
    'caret': CaretIcon,
  };

  constructor() { }

  public load() {
        window['ClarityIcons'].add(this.icons);
  }
}

如果您不使用 CLI 或 Webpack，您可以按照这些适用于 SVG 文件的说明进行操作（只需将 svg 替换为 html）。 https://medium.com/@sampsonjoliver/importing-html-files-from-typescript-bd1c50909992

Answer 2

解决方案对我有用

let icons = require('!raw-loader!../../../styles/assets/icons/icons.svg');

https://github.com/angular/angular-cli/issues/3879#issuecomment-358920021

您可能需要declare const require: any;

如何在 Angular 应用程序中 link 到本地 SVG 文件？

How to link to a local SVG file in the Angular app?

icons

svg

angular

vmware-clarity