如何在Angular应用程序中链接到本地​​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">部分时，它起作用。但是，当我想链接到本地​​文件时（如代码中所示），我无法获取该文件。我正在使用Angular7。如何在此处使用本地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;