如何在Angular模块中嵌入mat-icon svg图标源（无额外的Http请求）

Question

我正在使用Angular Material的MatIconRegistry创建自己的SVGmat-icon

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

这很有效，除了它创建一个HTTP请求来加载图标。由于这是一个非常小的重要猫图标，因此我希望将其嵌入模块中，因此不需要HTTP请求。

Answer 1

最终设法使用找出了答案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和webpack一起使用感到困惑-而且我还以为自己'这只是一个文件！为什么不加载该死的东西并嵌入它呢？

找到之后，svg-inline-loader它似乎从svg中删除了“外壳”，这是对类似于Illustrator可能会添加的不必要代码的怪异术语。

有关样板的其余部分，请参见如何在Angular Material中使用自定义SVG图标。

-

脚注：我做了一件愚蠢的事，这使我彻底离开了一段时间。我尝试创建一个图标数组并对其进行遍历，以将其全部导入。

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

那是行不通的。require语句是在编译时使用一些webpack魔术来处理的，我什至不知道编译器对此做了什么，但它不可能嵌入文件。我需要为要嵌入的每个图标复制上面的addSvgIconLiteral。