如何将图标集成到角度库中？

Question

我想将 SVG 图标集成到我的 Angular 库的模板中，我有以下问题？

• /assets

  文件夹应该位于哪里？它应该位于库结构中的

  /src

  或

  /src/lib

  下吗？

• ng-package.json

  和/或

  angular.json

  文件需要进行哪些修改？
• 组件模板中应如何引用 SVG 图标？应该使用相对路径、绝对路径来引用它们，还是无关紧要？

请问我怎样才能实现这个目标？

Answer 1

/assets 文件夹应该位于哪里？

在 Angular 库中，/assets 文件夹的建议位置位于 /src 下，而不是 /src/lib 下。这确保了在应用程序中构建和使用库时正确捆绑资源。

结构：

projects/src/assets/icons/icon.svg

ng-package.json 和/或 angular.json 修改

angular.json

{
  "projects": {
    "library-name": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              }
            ]
          }
        }
      }
    }
  }
}

ng-package.json

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "assets": [
    "src/assets"
  ]
}

在组件模板中

使用这样的相对路径

<img src="assets/icons/my-icon.svg" alt="My Icon">

使用相对路径可以确保资源与库打包在一起，并在不同环境中使用库时无缝工作。