Создание пользовательского коврика с помощью Github SVG - PullRequest
0 голосов
/ 26 сентября 2019

Попытка создать пользовательский SVG mat-icon, загружающий SVG напрямую из Github.Сначала я попробовал это с использованием DomSanitizer и , документировавших результат в этой статье .Таким образом, SVG действительно загружается через HttpClient.

Теперь я пытаюсь сделать это напрямую через DomSanitizer, например:

  constructor (private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer) {
          this.matIconRegistry.addSvgIcon(
      "logo",
      this.domSanitizer.bypassSecurityTrustResourceUrl("https://raw.githubusercontent.com/fireflysemantics/logo/master/l1.svg"));
    }

И провожу тест рендеринга в app.component.html:

<mat-icon>logo</mat-icon>

И SVG не появляется.Я предполагаю, что строка:

this.domSanitizer.bypassSecurityTrustResourceUrl("https://raw.githubusercontent.com/fireflysemantics/logo/master/l1.svg"));

должна загрузить svg, но я не вижу запроса на вкладке сети.Также, если мы просто вставим необработанный URL-адрес в адресную строку браузера:

https://raw.githubusercontent.com/fireflysemantics/logo/master/l1.svg

Запрос отображается на вкладке сети как l1.svg.

Мысли?

Stackblitz

Обновление

Вышеприведенный Stackblitz включает в себя исправление из ответа, так что он работает сейчас!

1 Ответ

1 голос
/ 27 сентября 2019

Запись в app.component.html должна выглядеть следующим образом:

<mat-icon svgIcon="logo"></mat-icon>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...