SVGファイルの読み込み - Web-packでのawesome

Question

私はsvgを使用するwebpackを持つプロジェクトを持っています。特定のインラインsvgファイルは正しく翻訳されていますが、font-awesomeのものはそうではありません。

私が持つ素晴らしいフォントをインポート：私が持っている

WebPACKの側では

import 'font-awesome-webpack'; 

：

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

これは正常に動作しますが、代わりにフォント素晴らしいアイコンの四角が表示されます。できるだけ早く私は、上記の行を追加すると

{ 
    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" 
} 

と、次のエラーが表示されている私のプロジェクトを起動しよう：今すぐ他の修正以下の私は、次のような他の非インラインSVGs、ローダの設定を追加する必要があります

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

問題は、私のwbepackの設定に従ってSvgsをロードする方法からはっきりと分かりますが、私のsvgをインポートする方法にかかわらず、同じエラーがプロジェクトを中断し続けます。

2つのwebpack設定が競合する可能性はありますか？ webpackの設定で何が間違っていますか？

Answer 1

FYI解決策は以下のとおりです。

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', 
    }, 
    }], 
},