【发布时间】：2018-10-31 17:26:32
【问题描述】：
我正在构建一个 Angular 应用程序 (Angular 4/5/6)，并希望在我的组件模板中使用 SVG 精灵。
问题：
假设我已经生成了我的 SVG 图标精灵 (icons.svg)，我怎样才能让 Angular 将我的 SVG 图标精灵注入/导入到我的组件模板中？
有没有一种方法可以将我的 SVG 图标精灵注入/导入到我的组件中，而无需使用任何 3rd 方模块/指令并使用 Angular 本身进行本机操作？
背景/问题：
如this article 中所述，icons.svg 文件将包含定义为<symbol> 的所有 SVG 图标。然后我可以使用<use> 在我的HTML 中呈现选定的图标，假设icons.svg 被注入到DOM 中。
我使用IcoMoon app 生成了 SVG 精灵，并将icons.svg 保存到我的 Angular 应用程序中。下面是我的示例 Angular 组件 (app.component.ts)，我在其中尝试注入/导入 icons.svg 文件并尝试在我的 HTML 中呈现 SVG 图标。但是，Angular 不会渲染我的 SVG 图标。我似乎错误地注入了 SVG 图标精灵文件。
更新：
- 我已经知道一个类似的问题，SVG icon system with angular-cli，建议的答案是使用 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 {
}
【问题讨论】：
-
创建一个 my-icon 组件，该组件引用您的 @input 精灵表。检查这个...Stackblitz
标签： angular svg angular-components svg-sprite