Question

我正在使用Angular Material的MatIconRegistry来创建自己的SVG mat-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中移除了'crust'，这对于像Illustrator这样的不必要的代码可能会添加一个稍微怪诞的术语。

对于余下的样板文件，请参阅How to Use Custom SVG Icons in Angular Material。

-

脚注：我做了一件愚蠢的事，完全把我扔了一会儿。我试图创建一个图标数组并迭代它们以便全部导入它们。

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

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

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

1 个答案: