导入 SVG 文件 - 使用 Webpack 的 font-awesome答案

【问题标题】：Importing SVG files - font-awesome with Webpack导入 SVG 文件 - 使用 Webpack 的 font-awesome
【发布时间】：2017-10-28 17:57:54
【问题描述】：

我有一个使用 svg 的 webpack 项目。某些内联 svg 文件已正确翻译，但来自 font-awesome 的则不正确。

我导入字体很棒：

import 'font-awesome-webpack';

在 webpack 方面我有：

{
    test: /\.svg$/,
    loaders: [
        'babel-loader',
        {
            loader: 'react-svg-loader',
            query: {
                jsx: true,
            },
        },
    ],
}],

这工作正常，但显示一个正方形而不是字体真棒图标。现在在进行其他修复后，我应该为其他非内联 SVG 添加加载器配置，例如：

{ 
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: "url-loader?limit=10000&mimetype=application/font-woff" 
},
{ 
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: "file-loader"
}

只要我添加以上行并尝试启动我的项目，就会显示以下错误：

Uncaught (in promise) Error: Invalid tag:/f01bf49c263128347d1c47cdc55eff66.svg

问题显然来自我按照 wbepack 配置加载 Svgs 的方式，但不管我导入 svgs 的不同方式，同样的错误继续破坏我的项目。

这两个 webpack 配置是否有可能产生冲突？我的 webpack 配置有什么问题？

【问题讨论】：

标签： svg webpack font-awesome

【解决方案1】：

仅供参考的解决方案是：

webpack 配置文件：

 {
  test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  loader: 'url-loader?limit=10000&mimetype=application/font-woff',
}, {
  test: /\.(ttf|otf|eot|svg)(\?v=[a-z0-9]\.[a-z0-9]\.[a-z0-9])?$/,
  use: [{
    loader: 'file-loader',
    options: {
      outputPath: 'fonts',
      publicPath: 'fonts',
    },
  }],
},

【讨论】：