如何链接到 Angular 应用程序中的本地 SVG 文件？答案

【问题标题】：How to link to a local SVG file in the Angular app?如何链接到 Angular 应用程序中的本地 SVG 文件？
【发布时间】：2019-09-07 12:48:51
【问题描述】：

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

【问题讨论】：

标签： angular svg icons vmware-clarity

【解决方案1】：

解决方案对我有用

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

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

你可能需要declare const require: any;

【讨论】：

【解决方案2】：

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

【讨论】：

我正在使用 CLI，但是当我尝试您的解决方案时，我无法进行第一次导入（找不到模块 'raw-loader!./../../assets/icons/to/三角形.svg)
你可能需要npm install -D raw-loader，这是一个webpack插件来加载这样的原始文件。
我尝试使用它，如文档中所述：https://webpack.js.org/loaders/raw-loader。另外，我尝试了 svg-inline-loader。没有正面影响。
我这样使用它（ng12）：import faUndo from "!!raw-loader!@cqg/icons/fontawesome/solid/undo.svg";