React + Webpack SVG Icons Render Issues

Question

I'm trying to render custom SVG icons that have been designed and exported for web. These are stored locally within an assets folder.

Using this package "svg-inline-loader"

Here is how I'm using the icon:

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

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

Here is the snippet I have from my webpack config

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

The render output I get the following:

The SVG icons do not render however, that path does not look right.

Is there a better way to do this or what am I doing wrong here?

Answer 1

您可以使用Webpack服务器通过使用Copy WebPack Plugin将资源复制到公用文件夹来提供资产