在Angular编译/构建时内联SVG

Question

我们有一个角度应用程序(SSR)，我需要在构建时内联一些SVG图标。这主要是为了减少节点服务器上的命中率。

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

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

Answer 1

据我所知，你需要创建一个自定义的方式来解析你的SVG提到的模板，然后创建一个中间的html与文件注入，生成器将使用它来生成最终的产品。

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

Answer 2

我做了@kmaraz/replace-svg-in-html-loader的Webpack加载器来解决这个问题。它是以NPM包的形式发布的，所以请随意试用。

对于安装过程，您可以遵循存储库中提供的自述文件：https://www.npmjs.com/package/@kmaraz/replace-svg-in-html-loader#getting-started

如果您有任何问题或问题，请直接给我发电子邮件或提交问题。

Answer 3

我用rawloader解决了这个问题。请参阅此处的示例==>

// Declare my SVG here
import mySVG from '!!raw-loader!../../../assets/my-svg-file.svg';

// Use it then to assign this 
svgElement.innerHTML = mySVG ;