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

вы можете преобразовать свой файл 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'
}

больше информации

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

Если вы переместите файл значка в папку /assets, он уже должен быть доступен, потому что папка src\assets уже включена в 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 в качестве пути к ресурсам, это в основном открыло бы все ваше приложение для обслуживания файлов, сделав доступным весь ваш каталог.

Раздвоил твой пример и обновил здесь

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

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

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>

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

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

Я решил эту проблему, используя угловой значок материала.

Угловой материал вводит SVG по идентификатору и без теневой дом.

Сначала установите угловой материал:

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

Импортируйте в свой модуль:

MatIconModule

Затем объявите свой SVG-спрайт в приложении или сервисе.

    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>

Подробнее читайте здесь