在react-redux MERN应用程序中导入SVG时出错

Question

我需要将.svg文件加载到MERN样板项目中的react组件中。 我在 webpack.config.dev.js 中使用此条目配置了webpack url-loader：

{
 test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.otf$|\.ttf$/i,
 loader: 'url-loader?limit=10000',
}

我尝试使用以下命令访问组件中的资源：

import logo from '../../../../assets/logo_h.svg'

但是我在启动 npm start

时遇到此错误

SyntaxError: : Unexpected token (1:1)
> 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    |  ^

Answer 1

您必须删除SVG顶部的<?xml ...。它不需要渲染SVG，并且在尝试解析时经常会在webpack中抛出错误。