如何在Angular库中集成SVG图标？

1. /assets文件夹的放置位置 #

直接把assets文件夹放在库的/src/lib目录下，和你的组件、服务等代码同级。这样做的原因是：库的专属资源应该和业务代码绑定，避免与宿主项目的根assets目录混淆，同时能被ng-packagr打包工具正确识别并纳入构建流程。

2. 配置文件修改 #

修改ng-package.json #

在文件的lib节点下添加assets配置，指定要打包的资源路径：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/your-library",
  "lib": {
    "entryFile": "src/public-api.ts",
    "assets": [
      "src/lib/assets" // 指向库内的assets文件夹
    ]
  }
}

这个配置会告诉ng-packagr在打包时把src/lib/assets下的所有文件复制到库的dist目录中。

修改angular.json（仅本地开发测试用） #

如果需要在本地测试库组件时正常加载SVG，要在宿主测试应用的angular.json中添加库资源的映射：

"projects": {
  "your-test-app": {
    "architect": {
      "build": {
        "options": {
          "assets": [
            "src/favicon.ico",
            "src/assets",
            {
              "glob": "**/*",
              "input": "./projects/your-library/src/lib/assets",
              "output": "/assets/"
            }
          ]
        }
      }
    }
  }
}

本地开发时，库的SVG会被拷贝到测试应用的assets目录下，确保路径可访问。

3. 组件模板中引用SVG的方式 #

两种路径方式都可用，具体看场景：

• 相对路径：适合组件与SVG相对位置固定的情况。比如组件在src/lib/components/button，SVG在src/lib/assets/icons/arrow.svg，模板中可以这样写：

  <img src="../assets/icons/arrow.svg" alt="Arrow icon">
  <!-- 或用svg标签引入 -->
  <svg><use href="../assets/icons/arrow.svg#arrow"></use></svg>
  

  注意：相对路径基于组件文件所在目录，要确保层级对应正确，避免打包后路径失效。

• 绝对路径：适合统一管理资源路径的场景。打包后库的assets会被部署到宿主项目的根assets目录下（或你配置的输出路径），直接用根路径引用即可：

  <img src="/assets/icons/arrow.svg" alt="Arrow icon">
  <svg><use href="/assets/icons/arrow.svg#arrow"></use></svg>
  

  注意：如果宿主项目对assets有自定义路径配置，要同步调整绝对路径。

内容的提问来源于stack exchange，提问作者abdou_behind_the_code