React + Webpack SVG 图标渲染问题答案

【问题标题】：React + Webpack SVG Icons Render IssuesReact + Webpack SVG 图标渲染问题
【发布时间】：2018-08-28 05:25:25
【问题描述】：

我正在尝试呈现为 Web 设计和导出的自定义 SVG 图标。它们存储在本地资产文件夹中。

这是我使用图标的方式：

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

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

这是我的 webpack 配置中的 sn-p

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

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

但是 SVG 图标不呈现，该路径看起来不正确。

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

【问题讨论】：

【解决方案1】：

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

【讨论】：