如何使用 webpack "file-loader" 和 "@svgr/webpack"(或 svg-inline-loader)

Question

我希望选项同时使用：exp->

import 'res/image.svg'
import myicon from 'res/icon.svg'
//in function
<img src='image.svg'/> //creat by webpack file-loader
<SvgIcon component={myicon}  viewBox="0 0 600 476.6"/> //creat by svgr/webpack

Webpack配置：(不起作用，因为image.svg(

{test: /.(svg|png|jpg|gif)$/,
use: {loader: "file-loader"}
},
{test: /.svg$/,
use: ['@svgr/webpack', 'url-loader'],
},

Answer 1

从文件加载器中删除svg扩展名

它应该是这样的：

{
test: /.(png|jpg|gif)$/,
use: {loader: "file-loader"}
},
{
test: /.svg$/,
use: ['@svgr/webpack', 'url-loader'],
}

然后您可以通过这种方式导入组件：

import { ReactComponent as MyIcon} from 'res/icon.svg'
<SvgIcon component={MyIcon}  viewBox="0 0 600 476.6"/>

通过这种方式获取网址：

import myIcon from 'res/icon.svg'
<img src={myIcon} />