Angular9中除Http/fetch外有没有其他方法读取assets下的SVG文件内容？

前置说明 #

以下两种方案均在构建阶段处理SVG资源，不依赖浏览器端fs模块，无额外运行时HTTP请求，完全适配上千个图标的使用场景。 #

方案1：预构建SVG雪碧图（性能最优，推荐） #

将所有SVG打包为单个雪碧图，全局仅加载一次，调用成本极低。

• 步骤1：安装兼容Angular9的依赖

npm install @angular-builders/custom-webpack@9.x svg-sprite-loader path --save-dev

• 步骤2：修改angular.json启用自定义webpack配置
  找到项目配置下的architect.build字段，修改builder并新增自定义webpack配置路径：

{
  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./custom-webpack.config.js"
        },
        // 保留其他原有配置不变
      }
    },
    "serve": {
      "builder": "@angular-builders/custom-webpack:dev-server"
      // 保留其他原有配置不变
    }
  }
}

• 步骤3：新增根目录下的custom-webpack.config.js配置文件

const path = require('path');
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        include: path.resolve(__dirname, 'src/assets/image'),
        use: [
          {
            loader: 'svg-sprite-loader',
            options: {
              symbolId: 'icon-[name]' // 生成的symbol id规则，如1.svg对应id为icon-1
            }
          }
        ]
      }
    ]
  }
}

• 步骤4：全局批量导入所有SVG
  在src/main.ts中添加一行代码，构建时自动加载目录下所有SVG：

require.context('src/assets/image', false, /\.svg$/);

• 步骤5：封装通用SVG组件调用
  新建svg-icon组件，模板代码如下：

<svg [attr.width]="width" [attr.height]="height" [attr.fill]="color">
  <use [attr.href]="`#icon-${iconName}`"></use>
</svg>

组件TS代码添加输入参数：

@Input() iconName: string;
@Input() width = '16px';
@Input() height = '16px';
@Input() color = '#000';

后续使用时直接调用即可，无需额外导入：

<app-svg-icon iconName="1" color="red" width="24px"></app-svg-icon>

方案2：导入SVG为源码字符串（适合需要操作SVG内容的场景） #

如果需要直接获取SVG的完整源码字符串，可通过类型声明直接导入。

• 步骤1：添加SVG类型声明
  在src目录下新建typings.d.ts（已有则直接添加）：

declare module '*.svg' {
  const content: string;
  export default content;
}

• 步骤2：批量导入所有SVG
  在需要使用SVG的组件或公共服务中批量导入：

const svgContext = require.context('src/assets/image', false, /\.svg$/);
const svgMap: Record<string, string> = {};
svgContext.keys().forEach(key => {
  const name = key.replace('./', '').replace('.svg', '');
  svgMap[name] = svgContext(key).default;
});

• 步骤3：直接使用SVG源码
  通过innerHTML绑定渲染：

<div [innerHTML]="svgMap['1']"></div>

注意：如果SVG中包含style、script等特殊标签，需要通过Angular的DomSanitizer对内容做安全处理，避免被XSS防护拦截。

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