如何在 Angular 组件 HTML DOM 中注入 SVG 图标精灵？

Question

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

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

有没有一种方法可以将我的 SVG 图标精灵注入/导入到我的组件中，而不必使用任何 3rd 方模块/指令并使用 Angular 本身在本地进行？

背景/问题：

正如在讨论这篇文章，icons.svg文件将包含所有定义为SVG图标<symbol>。然后我可以<use>假设icons.svg在 DOM 中注入了 ，在我的 HTML 中呈现选定的图标。

我使用IcoMoon app生成了 SVG 精灵，并将其保存icons.svg到我的 Angular 应用程序中。下面是我的示例 Angular 组件 ( app.component.ts )，我在其中尝试注入/导入icons.svg文件并尝试在我的 HTML 中呈现 SVG 图标。然而，Angular 并没有渲染我的 SVG 图标。我似乎错误地注入了 SVG 图标精灵文件。

更新：

1. 我已经知道一个类似的问题，带有 angular-cli 的 SVG 图标系统，其中建议的答案是使用 Node 模块svg-sprite使用 CSS 模式生成 SVG 精灵。然而，这不是我要问的。我不是要生成 SVG 精灵。我正在尝试让 Angular 组件了解我的 SVG 精灵icons.svg，并在我使用它们时让它在 HTML 中呈现它们。
2. 提出了一种解决方案，/sf/answers/3532225301/，从 SVG 精灵生成 CSS 字体。我觉得这不是一个可行的解决方案，而是无法使用 SVG 精灵的“解决方法”。

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

您可以通过https://icomoon.io/app/#/select将您的 svg 文件转换为字体，上传您的 svg 文件并选择它，单击“生成字体”，然后单击“下载”按钮，下载字体文件并选择字体文件夹，然后将其放入项目的文件夹中，

将字体文件导入到css文件中

@font-face {
   font-family: 'icomoon';
   src:  url('fonts/icomoon.eot?31svmk');
   src:  url('fonts/icomoon.eot?31svmk#iefix') format('embedded-opentype'),
   url('fonts/icomoon.ttf?31svmk') format('truetype'),
   url('fonts/icomoon.woff?31svmk') format('woff'),
   url('fonts/icomoon.svg?31svmk#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

像这样声明你的类

.icon-home:before {
  content: "\ea77";
}
.icon-conection:before {
  content: "\ea78";
}
.icon-rocket:before {
 content: "\ea79";
}

并在你的html中使用它

  <p>Icon (rocket): <i class="icon-rocket"></i> </p>

解决方案是在项目中添加图标，但是如果您想在项目中使用svg代码，最好将加载器添加到其中。

如果您使用过 webpack：

  npm install svg-inline-loader --save-dev

只需像这样将配置对象添加到 module.loaders 中即可。

{
    test: /\.svg$/,
    loader: 'svg-inline-loader'
}

更多信息