我们有一个Angular应用程序(SSR(，我需要在构建时内联一些SVG图标。这主要是为了减少对我们节点服务器的点击。
我们使用角度 svg 图标，它在运行时内联 SVG。我研究了 ng-inline-svg，它也在运行时运行。
我不想手动将它们添加到 HTML 中以免污染代码。有没有办法在编译/构建期间执行此操作？
我使用rawloader解决了这个问题。在此处查看示例 ==>
// Declare my SVG here
import mySVG from '!!raw-loader!../../../assets/my-svg-file.svg';
// Use it then to assign this
svgElement.innerHTML = mySVG ;
据我所知，您需要创建一种自定义方法来解析 SVG 提及的模板，然后创建一个注入文件的中间 html，构建器将使用该 html 生成最终产品。
我认为您可以创建一个像" svg_aggregator.js"这样的小js，并创建一个自定义命令，在ng构建之前运行它...在其中，您将打开.html模板，扫描它是否有 svg 提及，然后将文件复制到 tmp(如"home-component.tmp.html"(，然后生成一个新的"home-component.html"，注入 svg。然后运行 NG 构建，然后在构建之后运行另一个脚本(或相同的脚本，带有参数(以将模型恢复到其旧状态。
我制作了@kmaraz/replace-svg-in-html-loader Webpack加载器来解决这个问题。它作为 NPM 包发布，因此请随时尝试。
对于安装过程，tou 可以按照存储库中提供的自述文件进行操作：https://www.npmjs.com/package/@kmaraz/replace-svg-in-html-loader#getting-started
如果您有任何问题/疑问，请随时直接给我发电子邮件或提交问题。