导入SVG文件 - 字体真棒用的WebPack

我有一个的WebPack项目，它使用SVG。某些内联svg文件被正确翻译，但来自font-awesome的文件不是。导入SVG文件 - 字体真棒用的WebPack

我导入字体真棒有：

import 'font-awesome-webpack';

在的WebPack方面我有：

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

这工作得很好，但显示一个正方形，而不是字体真棒图标。现在下面的其他修复我要补充装载机配置其他非在线SVGs，如：一旦

{ 
    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配置有什么问题？

来源

2017-05-28 Santa Clauze

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

来源

2017-05-28 11:49:47

导入SVG文件 - 字体真棒用的WebPack

回答

相关问题