Как внедрить спрайты значков SVG в угловой компонент HTML DOM?

Question

Я создаю приложение Angular (Angular 4/5/6) и хотел бы использовать спрайты SVG в шаблоне моего компонента.

Вопрос: Предполагая, что у меня уже сформирован спрайт значков SVG (icons.svg), как я могу заставить Angular вводить / импортировать спрайт значков SVG в шаблон моего компонента?

Есть ли способ внедрить / импортировать мой SVG-значок спрайта в мой компонент без необходимости использования каких-либо сторонних модулей / директив и делать это изначально с самим Angular?

Предпосылки / проблема:

Как обсуждалось в в этой статье , icons.svg файл будет содержать все значки SVG, определенные как <symbol>.Затем я могу отобразить выбранные значки в своем HTML-коде, используя <use>, предполагая, что icons.svg введен в DOM.

Я сгенерировал SVG-спрайты с помощью приложения IcoMoon и сохранил icons.svg в своем приложении Angular.Ниже приведен пример моего компонента Angular ( app.component.ts ), в котором я пытаюсь внедрить / импортировать файл icons.svg и пытаюсь отобразить значки SVG в моем HTML.Тем не менее, Angular не отображает мои иконки SVG.Кажется, я неправильно внедряю файл спрайта SVG-иконки.

Обновления:

1. Мне уже известен подобный вопрос Система значков SVG с angular-cli , где предлагается ответдолжен был использовать Node-модуль svg-sprite для генерации SVG-спрайтов в режиме CSS.Тем не менее, это не то, что я спрашиваю.Я не пытаюсь генерировать SVG-спрайты.Я пытаюсь заставить компоненты Angular знать о моем SVG-спрайте, icons.svg, и заставить его отображать их в HTML всякий раз, когда я их использую.
2. Было предложено решение, https://stackoverflow.com/a/50460361/4988010, для создания шрифта CSS из SVG-спрайта.Я чувствую, что это НЕ выполнимое решение, а скорее «обходной путь» к невозможности использования 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

Я думаю, что ваш корневой путь - это то, где у вас возникают проблемы.В вашем коде вы указываете угловой для просмотра app, но браузер видит это как https://your-site.com./icons

Если вы переместите файл значков в папку /assets, то он должен быть доступен уже, потому что *Папка 1006 * уже включена в angular.json, коллекция "assets" сообщает Angular, где искать.

<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

Я был сегодня в той же лодке, когда дизайнеры отказывались от шрифта svg.Я также не хотел перемещать значок def из node_modules, потому что он со временем изменится.Я придумал решение.

Сначала нужно создать угловой значок, а затем сделать что-то вроде этого:

import { Component, OnInit, Input } from '@angular/core';
declare const require;
@Component({
  selector: 'my-icon',
  templateUrl: './my-icon.component.html',
  styleUrls: ['./my-icon.component.scss']
})
export class IconComponent implements OnInit {

  constructor() { }

  @Input() icon: string = "";
  @Input() x: string = "0";
  @Input() y: string = "0";
  @Input() fillColor: string = "black";
  @Input() strokeColor: string = "black";
  @Input() height: string = "";
  @Input() width: string = "";
  private baseUrl: string = require("../../../../../node_modules/path/to/defs.svg") + "#beginning-of-iconset-";

  svgUrl: string = "";

  ngOnInit() {
  }

  ngAfterViewInit() {
    setTimeout(()=>{
      this.svgUrl = this.baseUrl + this.icon;
    },0);

  }

}

А затем в html:

<svg [attr.height]="height" [attr.width]="width" xmlns="http://www.w3.org/2000/svg">
  <use [attr.href]="svgUrl" [attr.x]="x" [attr.y]="y" [attr.fill]="fillColor" [attr.stroke]="strokeColor" />
</svg>

Я все еще работаю над масштабированием решения, поскольку атрибуты width и height работают не так, как ожидалось.Вы также можете расширить входные данные, насколько я знаю.

Надеюсь, это поможет.

Answer 3

вы можете преобразовать свой SVG-файл в шрифт с помощью https://icomoon.io/app/#/select, загрузить свой 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, лучше всего добавить к нему загрузчик.

Если вы использовали веб-пакет:

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

Просто добавьте объект конфигурации в module.loaders вот так.

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

подробнее