使用 angular-svg-icon 组件从库的资产中引用 svg 图标

【问题标题】：Referencing svg icon from library's assets using angular-svg-icon component使用 angular-svg-icon 组件从库的资产中引用 svg 图标
【发布时间】：2021-04-23 00:17:12
【问题描述】：

我有一个 Angular 项目，其中有一个额外的库。图书馆是资源的一部分。主应用程序和库都有资产，都显示资产目录中的 SVG 图标。我正在使用模块 angular-svg-icon 来显示这些 SVG 图像。

问题是，虽然库以正确的方式显示图标，但我试图在主应用程序中显示相同的图标，但我找不到图标的正确路径。我不知道 angular-svg-icon 做了什么，因为它没有完全记录在案。

库资源和特定图标的路径：projects/projectX/src/assets/icons/iconA.svg。

正如我所说，图标会显示在组件的库中，但不会显示在主应用程序的另一个组件中。

我在库和主应用程序中使用此代码：

<svg-icon src="assets/icons/iconA.svg"></svg-icon>

我应该如何引用图标？

【问题讨论】：

标签： angular svg icons angular-library

【解决方案1】：

好的，我找到了解决办法。

解决方案是在运行时调试angular-svg-icon 源代码。

我设置了一些断点，它从未遇到过。所以我决定模块没有以正确的方式加载。所以它必须首先与模块加载机制有关。

我在app.module.ts 中添加了缺失的模块后，图标终于显示出来了，甚至没有改变图标的路径。

imports: [
  ...
  AngularSvgIconModule,

所以现在，以下工作：

<svg-icon src="assets/icons/iconA.svg"></svg-icon>

我必须补充一点，我在angular.json 中有以下内容，以将库的资产捕获到目标包中：

  "architect": {
    "build": {
      ...
      "options": {
        ...
        "assets": [
          ...
          {
            "glob": "**/*",
            "input": "projects/projectX/src/assets/",
            "output": "/assets"
          }
        ],

【讨论】：