reactjs - 如何同时使用 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"/>

这样获取url:

import myIcon from 'res/icon.svg'

<img src={myIcon} />