Angular 编译/构建时内联 SVG

Question

我们有一个 Angular 应用程序 (SSR)，我需要在构建期间内联一些 SVG 图标。这主要是为了减少我们节点服务器的点击。

我们使用angular-svg-icon在运行时内联 SVG。我研究了ng-inline-svg它也在运行时运行。

我不想手动将它们添加到 HTML 中，以免污染代码。有没有办法在编译/构建期间执行此操作？

Answer 1

据我所知，您需要创建一种自定义方法来解析 SVG 提及的模板，然后创建一个包含注入文件的中间 html，构建器将使用该方法来生成最终产品。

我认为你可以创建一个像“ svg_aggregator.js”这样的小js，并创建一个在ng构建之前运行它的自定义命令...在其中，你将打开你的.html模板，扫描它是否有svg提及，然后复制文件到 tmp（如“home-component.tmp.html”），然后生成一个新的“home-component.html”，并注入 svg。然后 ng 构建运行，然后在构建之后运行另一个脚本（或带有参数的相同脚本）以将模型恢复到旧状态。