我正在构建一个 Angular 应用程序（Angular 4/5/6）并且想在我的组件模板中使用 SVG 精灵。
问题：
假设我已经生成了我的 SVG 图标精灵 ( icons.svg)，我怎样才能让 Angular 将我的 SVG 图标精灵注入/导入到我的组件模板中？
有没有一种方法可以将我的 SVG 图标精灵注入/导入到我的组件中，而无需使用任何 3rd 方模块/指令并使用 Angular 本身进行本地化？
背景/问题：
正如本文所讨论的，文件icons.svg将包含所有定义为<symbol>. 然后我可以在我的 HTML 中渲染选定的图标，<use>假设它icons.svg被注入到 DOM 中。
我使用IcoMoon app生成了 SVG 精灵，并将其保存icons.svg到我的 Angular 应用程序中。下面是我尝试在其中注入/导入文件并尝试在我的 HTML 中呈现 SVG 图标的示例 Angular 组件 ( app.component.ts )。icons.svg但是，Angular 不会渲染我的 SVG 图标。我似乎错误地注入了 SVG 图标精灵文件。
更新：
- 我已经知道一个类似的问题，带有 angular-cli 的 SVG 图标系统，其中建议的答案是使用 Node 模块svg-sprite使用 CSS 模式生成 SVG 精灵。然而，这不是我要问的。我不是想生成 SVG 精灵。我正在尝试让 Angular 组件了解我的 SVG 精灵，
icons.svg并在我使用它们时让它在 HTML 中呈现它们。 - 建议使用解决方案https://stackoverflow.com/a/50460361/4988010从 SVG 精灵生成 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 {
}
