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

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 中删除了“外壳”，这对于 Illustrator 之类的可能添加的不必要代码来说是一个有点怪诞的术语。

有关样板的其余部分，请参阅 How to Use Custom SVG Icons in Angular Material .

--

脚注:我做了一件愚蠢的事情，这让我有一段时间完全失望了。我试图创建一个图标数组并遍历它们以将它们全部导入。

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

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