webpack svg to woff

要将 SVG 转换为 WOFF，您需要使用一个名为 `svg2woff` 的工具。以下是使用 webpack 配置的步骤：

1. 安装 `svg2woff`

   npm install svg2woff --save-dev

2. 在 webpack 配置中添加以下代码：

   const svg2woff = require('svg2woff');

   module.exports = {
     // ...
     module: {
       rules: [
         {
           test: /\.svg$/,
           use: [
             {
               loader: 'file-loader',
               options: {
                 // 指定输出的文件名和路径
                 name: '[name].[ext]',
                 outputPath: 'fonts/'
               },
             },
             {
               loader: 'webpack-svg-woff-loader',
               options: {
                 // 根据需要设置字体的名称和样式
                 fontName: 'myFont',
                 fontStyle: 'normal'
               },
             },
           ],
         },
       ],
     },
     // ...
     plugins: [
       // 添加插件，将 SVG 转换为 WOFF
       new webpack.LoaderOptionsPlugin({
         options: {
           svg2woff: {
             // 设置 WOFF 格式的字体文件名，必须与 file-loader 中的名称匹配
             fileName: '[name].woff',
             // 设置字体格式
             format: 'woff'
           },
         },
         // 注册自定义插件
         postTransform: function (webpackConfig) {
           webpackConfig.module.rules.forEach(function (rule) {
             if (rule.loader === 'webpack-svg-woff-loader') {
               rule.options.svg2woff = webpackConfig.options.svg2woff;
             }
           });
           return webpackConfig;
         },
       }),
     ],
   };

上述代码中，我们使用了两个 loader：

- `file-loader` 用于将 SVG 文件复制到指定的目录中，并返回 URL。
- `webpack-svg-woff-loader` 用于将 SVG 文件转换为 WOFF 字体。它依赖于 `svg2woff` 工具，它将字体文件写入到输出目录中。

我们还需要将 `svg2woff` 的选项传递给 `webpack-svg-woff-loader`，以便它知道如何将字体转换为 WOFF 格式。

3. 运行 webpack

运行 `webpack` 命令时，它将使用上述配置来编译您的代码，并将 SVG 文件转换为 WOFF 格式的字体文件。生成的文件将保存在输出目录中（在本例中为 `fonts` 目录）。

希望这可以帮助您将 SVG 转换为 WOFF，并在 webpack 中使用它们。