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

Question

我正在构建一个角应用程序(角4/5/6)，并希望在我的组件模板中使用SVG精灵。

问题:假设我已经生成了SVG图标sprite (icons.svg)，那么如何才能将SVG图标sprite注入/导入到组件的模板中呢？

有没有一种方法可以将我的SVG图标雪碧注入/导入到我的组件中，而不必使用任何第三方模块/指令，并且用角度本身来实现它呢？

Background/Issue:

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

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

更新：

1. 我已经知道了一个类似的问题，带角cli的SVG图标系统，建议的答案是使用Node模块https://www.npmjs.com/package/svg-sprite来使用CSS模式生成SVG精灵。然而，这不是我所要求的。我不是想要生成SVG精灵。我正在尝试获取角度组件，以了解我的sprite，icons.svg，并让它在我使用它们时在HTML中呈现它们。
2. 有人提出了一个解决方案，https://stackoverflow.com/a/50460361/4988010，从sprite中生成一个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

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

如果您将图标文件移动到您的/assets文件夹下，那么它应该已经可用，因为src\assets文件夹已经包含在angular.json中，"assets"集合会告诉您查看的位置。

<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作为资产路径，这基本上会打开整个应用程序来提供文件服务，从而使整个目录都可以访问。

我分叉了您的示例并更新了这里

Answer 2

我用棱角材质图标解决了这个问题。

角材料通过id注入SVG，而不使用影子.

首先安装角质材料：

"@angular/material": "^7.3.7", // change version according to your angular version 

导入到您的模块：

MatIconModule

然后在app.component或服务中声明您的sprite。

    constructor(
        private matIconRegistry: MatIconRegistry,
        private domSanitizer: DomSanitizer) { 
matIconRegistry.addSvgIconSet(this.domSanitizer.bypassSecurityTrustResourceUrl(`assets/sprite.svg`));
        }

最后，在Html中使用角材质图标：

<mat-icon svgIcon="svg-id"></mat-icon> // or use as directive <div svgIcon="svg-id"></div>

在这里读更多

Answer 3

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

​

将字体文件导入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'
}

更多信息