angular - 如何在 Angular 组件 HTML DOM 中注入(inject) SVG 图标 Sprite ？

Question

我正在构建一个 Angular 应用程序(Angular 4/5/6)并且想在我的组件模板中使用 SVG Sprite 。

问题:假设我已经生成了我的 SVG 图标 Sprite (icons.svg)，我怎样才能让 Angular 将我的 SVG 图标 Sprite 注入(inject)/导入到我的组件模板中？

有没有一种方法可以将我的 SVG 图标 Sprite 注入(inject)/导入到我的组件中，而无需使用任何第 3 方模块/指令并使用 Angular 本身来完成？

背景/问题:

如 this article 中所述, icons.svg文件将包含定义为 <symbol> 的所有 SVG 图标.然后我可以使用 <use> 在我的 HTML 中呈现选定的图标假设 icons.svg被注入(inject)到 DOM 中。

我使用 IcoMoon app 生成了 SVG Sprite 图, 并保存了 icons.svg进入我的 Angular 应用程序。下面是我的示例 Angular 组件 (app.component.ts)，我试图在其中注入(inject)/导入 icons.svg文件并尝试在我的 HTML 中呈现 SVG 图标。但是，Angular 不会渲染我的 SVG 图标。我似乎错误地注入(inject)了 SVG 图标 Sprite 文件。

更新:

1. 我已经知道一个类似的问题，SVG icon system with angular-cli ，其中建议的答案是使用 Node 模块 svg-sprite 使用 CSS 模式生成 SVG Sprite 。但是，这不是我要问的。我不是要生成 SVG Sprite 。我正在尝试让 Angular 组件知道我的 SVG Sprite ，icons.svg ，并让它在我使用它们时将它们呈现在 HTML 中。
2. 建议了一个解决方案，https://stackoverflow.com/a/50460361/4988010 , 从 SVG Sprite 生成 CSS 字体。我觉得这不是一个可行的解决方案，而是无法使用 SVG Sprite 的“解决方法”。

app.component.ts:StackBlitz 上的实时示例:https://stackblitz.com/edit/angular-bbr2kh?file=src/app/app.component.ts

import { Component } from '@angular/core';
// import `./icons.svg`; // This import method doesn't work


@Component({
  selector: 'my-app',
  template: `

   <!-- This import method doesn't work -->
   <!-- <script src="./icons.svg"></script>  -->

  <p>
  Hello this is a sample Angular 6 component.
  </p>

  <p>Testing to see if SVG icon sprite import works. See below if icons appear. </p>
  <p>Icon (home): <svg class="icon icon-home"><use xlink:href="#icon-home"></use></svg> </p>
  <p>Icon (rocket): <svg class="icon icon-rocket"><use xlink:href="#icon-rocket"></use></svg> </p>
  <p>Icon (wifi): <svg class="icon icon-connection"><use xlink:href="#icon-connection"></use></svg>

  <!-- This import method doesn't work -->
  <!-- <p>Icon (home): <svg class="icon icon-home"><use xlink:href="./icons.svg#icon-home"></use></svg> </p>-->

   </p>
  `,
  styles: [`

  .icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  }

  `]
})
export class AppComponent {
}

Answer 1

我认为您的根路径是您遇到问题的地方。在您的代码中，您告诉 angular 在 app 中查看，但浏览器将其视为 https://your-site.com./icons

如果您将图标文件移动到 /assets 文件夹下，那么它应该已经可用，因为 src\assets 文件夹已经包含在 angular 中。在 json 中，“assets” 集合告诉 Angular 去哪里找。

<svg class="icon">
   <use xlink:href="/assets/icons.svg#icon-rocket"></use> // Notice root path not "./"
</svg>

如果你希望你的文件从另一个目录提供，你需要做的就是在你的 angular.json 中添加一个路径:

…
"assets": [
   "src/favicon.ico",
   "src/assets",
   "src/your-dir"
],
…

然后在你的代码中

<svg class="icon">
   <use xlink:href="/your-dir/icons.svg#icon-rocket"></use>
</svg>

我不建议添加 /src/app 作为 Assets 路径，这基本上会打开您的整个应用程序来提供文件，使您的整个目录都可以访问。

我 fork 了你的例子并更新了here