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

我正在使用角度材质创建自己的SVG

mat图标

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

---

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

最终使用

svg内联加载程序找到了它

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内联加载器之后，它似乎从svg中删除了“外壳”，这是一个有点奇怪的术语，表示Illustrator之类的东西可能添加的不必要的代码

有关样板文件的其余部分，请参见

--

脚注：我做了一件愚蠢的事，这件事让我一时完全失去了兴趣。我试图创建一个图标数组，并对它们进行迭代，以便将它们全部导入

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

那是行不通的。require语句是在编译时用一些webpack魔法处理的，我甚至不知道编译器对此做了什么，但它不可能嵌入文件。我需要为我想要嵌入的每个图标复制上面的addSvgIconLiteral。
Dynamic
require
在Webpack中通过——应用一点魔法来找出表达式可能包含哪些文件，然后构建一个包含所有文件的
上下文以及通过路径/文件名访问它们的方法。实际上，我还没有尝试使用
['cat'、'dog'、'tree'].map（x=>require（'path-to-assets/'+x+'.svg'））等工具让Webpack智能地处理这个问题，但是文档让它听起来应该可以工作。我使用Angular，他们喜欢把大部分Webpack内容隐藏起来（我很满意！）。不知道是这么聪明：）