Как встроить источник значков svg mat-icon в модуль Angular (без дополнительного запроса Http) - PullRequest
Новая
       16

Как встроить источник значков svg mat-icon в модуль Angular (без дополнительного запроса Http)

0 голосов
/ 04 июня 2018

Я использую Angular Material MatIconRegistry , чтобы создать свой собственный SVG mat-icon 

this.iconRegistry.addSvgIcon('cat',   
this.sanitizer.bypassSecurityTrustResourceUrl('assets/images/animals/cat.svg'));

Это прекрасно работает, за исключением того, что создает запрос HTTPзагрузить значок.Поскольку это очень маленький и важный значок cat, я хочу встроить его в модуль, чтобы не требовался HTTP-запрос.

1 Ответ

0 голосов
/ 04 июня 2018

В конце концов удалось выяснить это, используя svg-inline-loader. 

declare let require: any;  

 ...

this.iconRegistry.addSvgIconLiteral('cat', this.sanitizer.bypassSecurityTrustHtml(
                  require('!svg-inline-loader!src/assets/animals/cat.svg')));

Встроенный файл можно проверить, просмотрев источник main.js или файл вашего модуля, и он будет встроен.

Сначала я неохотно продолжал использовать загрузчик, потому что я все еще несколько озадачен тем, как все это работает с CLI и веб-пакетом, а также подумал про себя: «Это всего лишь файл!почему бы просто не загрузить эту чертову вещь и внедрить ее ».

После нахождения svg-inline-loader кажется, что она удаляет« корку »из svg, что является немного гротескным термином для ненужного кода, который мог бы сделать что-то вроде Illustratorдоп.

Для остальной части шаблона см. Как использовать пользовательские значки SVG в угловом материале .

-

Сноска: я сделал одинглупая вещь, которая на некоторое время полностью отбросила меня.Я попытался создать массив значков и перебрать их, чтобы импортировать их все. 

require('!svg-inline-loader!src/assets/animals/' + name + '.svg');

Это НЕ сработает.Оператор require обрабатывается во время компиляции с помощью некоторого волшебства веб-пакета, и я даже не знаю точно, что делает компилятор, но он не может встроить файл.Мне нужно было продублировать вышеупомянутый addSvgIconLiteral для каждой иконки, которую я хотел внедрить.

...