React + Webpack SVG图标渲染问题

Question

我正在尝试渲染为web设计和导出的自定义SVG图标。它们存储在资产文件夹中。

使用此程序包"svg-inline-loader"

以下是我使用图标的方式：

import MainLogo from '../../../assets/svg/logos/mainlogo.svg';

<img src={MainLogo} alt="" />

以下是我的webpack配置中的代码段

//SVG Icon Loader
      {
        test: /\.svg$/,
        loader: 'svg-inline-loader'
      },

渲染输出我得到以下内容：

然而，SVG图标不会渲染，该路径看起来不正确。

有更好的方法可以做到这一点，或者我在这里做错了什么？

Answer 1

您可以使用Copy WebPack Plugin

将资源复制到公用文件夹，以使用网络包服务器来提供资源