Угловая 6+ и правильная санация SVG - PullRequest
Новая
       41

Угловая 6+ и правильная санация SVG

0 голосов
/ 10 сентября 2018

Я пытаюсь создать систему значков SVG на основе того, что сделал Материал 2 с matIcon, а также со статьей css-tricks .Как правильно санировать svg, чтобы компонент загружал соответствующий символ?

Stackblitz

icon.svg 

<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
        <symbol id="logo" width="772.6px" height="147px" viewBox="-63 449 772.6 147">
            <path>...</path>
        </symbol>
    </defs>
</svg>

icon.компонент 

import { Component, Input, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
    selector: 'app-icon',
    template: `
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <use [attr.xlink:href]="SvgIcon"></use>
    </svg>
  `
})
export class SvgIconComponent implements OnInit {
    @Input() icon: string;
    SvgIcon: SafeHtml;
    IconURL = 'http://localhost:4200/assets/icon.svg';

    constructor(
        private sanitizer: DomSanitizer
    ) { }

    ngOnInit() {
        const iconId = this.IconURL.concat('#', this.icon);
        this.SvgIcon = this.sanitizer.bypassSecurityTrustHtml(iconId);
    }

}

Я получаю сообщение об ошибке: platform-browser.js: 1091 GET http://localhost:4200/SafeValue%20must%20use%20[property]=binding:%20http://localhost:4200/assets/icon.svg net :: ERR_ABORTED 404 (не найдено)

...