Angular编译/构建期间内联SVG

Question

我们有一个Angular应用程序（SSR），我需要在构建时内联一些SVG图标。这主要是为了减少对我们节点服务器的访问次数。

我们正在使用angular-svg-icon，它会在运行时内联SVG。我看了一下ng-inline-svg，它也可以在运行时操作。

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

- Osama FelFel

---

你可以在组件的构造函数中使用ngIf，并像这样编写代码：this.browser = isPlatformBrowser(this.platformId); - Bartando

@Bartando，我不确定这会如何帮助，您能否稍微解释一下？我的目标是在构建期间将SVG内联到HTML中，以便节省用于检索SVG的服务器调用。 - Osama FelFel

你有没有阅读过 ng-inline-svg 的 readme 中的这一部分？你在使用什么进行服务器端渲染（SSR）？ - Maxinne

@joaoBeno 是的，我读了这一部分。它建议可以在服务器端渲染SVG，在接收请求后进行。但我需要在构建/编译期间替换/注入SVG。 - Osama FelFel

Answer 1

我使用 rawloader 解决了这个问题。 在此处查看示例 ==>

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

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

- Karl

Answer 2

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

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

- Maxinne

---

实际上，我现在正在做类似的事情。我想确保没有更好的方法。感谢您的建议。 - Osama FelFel

嗨Osama，你能在构建时创建内联SVG吗？ - Kamil

@Kamil很想看看你的看法，也许可以起草自己的答案？ - Mark Odey

嗨！我制作了@kmaraz/replace-svg-in-html-loader，你可以在NPM上找到它。随意提交问题或直接给我发电子邮件。 - Kamil

Answer 3

我创建了@kmaraz/replace-svg-in-html-loader Webpack加载器来解决这个问题。它已经发布为NPM包，所以可以随时尝试。

有关安装过程，您可以按照存储库中提供的README：https://www.npmjs.com/package/@kmaraz/replace-svg-in-html-loader#getting-started进行操作。

如果您有任何问题/疑问，请随时直接发送电子邮件给我或提交一个问题。

- Kamil