用webpack将svg文件转换为angular 2字体

npm install --save-dev svg-sprite-loader file-loader

module.exports = {
  // 其他配置项...
  module: {
    rules: [
      // 处理SVG文件
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-sprite-loader',
            options: {
              symbolId: 'icon-[name]'
            }
          },
          'svgo-loader' // 可选，用于优化SVG文件
        ]
      },
      // 处理字体文件
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['file-loader']
      }
    ]
  }
};

import { Component } from '@angular/core';
import icon from './icon.svg'; // 引入SVG文件

@Component({
  selector: 'app-root',
  template: `
    <div class="icon">
      <svg>
        <use xlink:href="{{ icon }}"></use> <!-- 使用SVG图标 -->
      </svg>
    </div>
  `,
  styles: [`
    .icon {
      width: 24px;
      height: 24px;
    }
  `]
})
export class AppComponent {
  icon = icon; // 将SVG文件赋值给icon变量
}

module.exports = {
  // 其他配置项...
  module: {
    rules: [
      // 处理SVG文件...
      // 处理字体文件
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      }
    ]
  }
};