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

问题描述

我有一个 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-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"
          }
        ],