如何在 Angular 组件 HTML DOM 中注入 SVG 图标精灵? [英] How to inject SVG icon sprites in Angular component HTML DOM?

问题描述

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

I am building an Angular application (Angular 4/5/6) and would like to use SVG sprites in my component template.

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

Question: Assuming I already have my SVG icon sprite generated (icons.svg), how can I get Angular to inject/import my SVG icon sprite into my component's template?

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

Is there a way to inject/import my SVG icon sprite into my component without having to use any 3rd party modules/directives and do it natively with Angular itself?

背景/问题:

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

As discussed in this article, icons.svg file would contain all the SVG icons defined as <symbol>. Then I can render selected icons in my HTML using <use> assuming the icons.svg is injected in the DOM.

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

I generated SVG sprites using IcoMoon app, and saved the icons.svg into my Angular application. Below is my sample Angular component (app.component.ts) in which I am trying to inject/import the icons.svg file and trying to render the SVG icons in my HTML. However, Angular is not rending my SVG icons. I seems I am incorrectly injecting the SVG icon sprite file.

更新:

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

1. I am already aware of a similar question, SVG icon system with angular-cli, where the suggested answer was to use the Node module svg-sprite to generate a SVG sprites using the CSS mode. However, this is NOT what I am asking. I am NOT trying to generate the SVG sprites. I am trying get Angular components to be aware of my SVG sprite, icons.svg, and get it to render them in the HTML whenever I make use of them.
2. A solution was suggested,https://stackoverflow.com/a/50460361/4988010, to generate a CSS font from the SVG sprite. I feel this is NOT a feasible solution and instead is a "workaround" to not being able to use the SVG sprite.

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

app.component.ts: Live example on 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 {
}

推荐答案

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

I think your root path is where you are having problems. In your code you are telling angular to look in app but the browser sees this as https://your-site.com./icons

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

If you move your icon file under your /assets folder, then it should be available already because the src\assets folder is already included in angular.json, the "assets" collection tells Angular where to look.

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

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

If you would like your files to be served from another directory all you need to do is add a path in your 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 作为资产路径，这基本上会打开整个应用程序来提供文件，使整个目录都可以访问.

I wouldn't suggest adding /src/app as an asset path, this would basically open up your entire app for serving files, making your entire directory accessible.

我分叉了你的例子并更新了这里

I forked your example and updated here

这篇关于如何在 Angular 组件 HTML DOM 中注入 SVG 图标精灵?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！