当前正在处理一个基于Redux的React并使用webpack的项目（都是新功能！）。我一直在寻找SVG问题的可能解决方案，这些问题一旦编译就不会呈现，但我认为问题在于正在编译的路径并不一定是我上载时使用的路径。
我正在使用webpack编译文件。目前，当我编译时，我在dist文件夹中得到了典型的index.html和main.js文件。
/dist
index.html
main.js
/src
/components
Categories.js
/images
/icons
...
movers.svg
App.css
App.js
index.js
index.html
但是，我有要尝试工作的svg。目前，我无法加载它们。我尝试了许多不同的方法（以下是我偶然发现stackoverflow的一种方法），但没有获得任何成功。
此外，我正在上传到我们公司使用的平台，该平台要求上传的文件结构如下：
/app
/public
/images
/javascripts
/data
/stylesheets
index.html
但是，我可以将main.js放在javascript文件夹中，而不必放置任何样式表（因为编译后的文件具有全部功能并且可以工作）。但是我无法获取svgs或图像资产路径或引用以某种方式进行编译，即它在main.js文件中是1.还是在2.我可以在上面的/ images文件夹中拥有这些资产，并且当我上传到平台时，有我的main.js文件引用
我已经到了我的SVG也作为数字路径（例如8997987974974.js）文件夹输出到我的/ dist中的位置，但是一旦移动到javascript文件夹中的应用程序结构中，（因为我认为这是因为该结构在一个文件夹中或未加载的图像中具有索引，主文件和svg的所有三种类型。
我的React组件引用了svgs：
import React, { Component } from 'react';
const svgs = require.context('../images/icons', true, /\.svg$/)
const svgsObj = svgs.keys()
.reduce((images, key) => {
images[key] = svgs(key)
return images
}, {})
console.log(svgsObj)
const findSvgSrc = (category) => {
const svgPath = Object.keys(svgsObj).filter((item) => {
return item.indexOf(category) > -1
})
return svgsObj[svgPath]
}
class CategoryList extends Component {
render() {
const { categories, setCategory, cName } = this.props
// console.log(categories)
return (
<div className={cName}>
<div className="category-list">
<ul>
{categories.list.map((category) => (
<li className="category-list-item" key={category} onClick={() => (setCategory(category.toLowerCase()))}>
<img className="category-icon" src={findSvgSrc(category.toLowerCase())}></img>
<span className="font-color-white category-name">{category}</span>
</li>
))}
</ul>
</div>
</div>
)
}
}
export default CategoryList;
我的webpack.config文件
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");
const htmlWebpackPluginDev = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /.(jpg|jpeg|png|svg)$/,
use: ['file-loader'],
},
]
},
plugins: [htmlWebpackPluginDev]
};
SVG示例（当单独放置在页面上时可以使用，但是可能出问题了吗？）
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 25 25" style="enable-background:new 0 0 25 25;" xml:space="preserve">
<style type="text/css">
.st0{fill:#F01446;}
.st1{fill:#FFFFFF;}
</style>
<circle class="st0" cx="12.5" cy="12.5" r="12.3"/>
<path class="st1" d="M5.4,16.8c-0.1,0-0.1-0.1-0.2-0.1c0,0.1,0,0.2,0.1,0.2c0.1,0,0.1,0,0.2,0C5.5,16.9,5.4,16.8,5.4,16.8z
M6.2,16.3c0-0.3-0.2-0.5-0.5-0.5c-0.3,0-0.5,0.2-0.5,0.5c0,0.3,0.2,0.5,0.5,0.5C6,16.8,6.2,16.6,6.2,16.3z M5.7,16.6
c-0.2,0-0.3-0.1-0.3-0.3c0-0.2,0.1-0.3,0.3-0.3C5.9,16,6,16.1,6,16.3C6,16.5,5.9,16.6,5.7,16.6z M20.2,16.3c0-0.3-0.2-0.5-0.5-0.5
c-0.3,0-0.5,0.2-0.5,0.5c0,0.3,0.2,0.5,0.5,0.5C20,16.8,20.2,16.6,20.2,16.3z M19.8,16.6c-0.2,0-0.3-0.1-0.3-0.3
c0-0.2,0.1-0.3,0.3-0.3c0.2,0,0.3,0.1,0.3,0.3C20.1,16.5,19.9,16.6,19.8,16.6z M6.1,16.8c-0.1,0-0.1,0.1-0.1,0.1c0.1,0,0.1,0,0.2,0
c0.1,0,0.1-0.1,0.1-0.2C6.2,16.7,6.1,16.8,6.1,16.8z M6.3,16.1c0,0.1,0,0.1,0.1,0.2c0.1-0.1,0.1-0.1,0.1-0.2c0-0.1-0.1-0.1-0.2-0.1
C6.2,16,6.3,16,6.3,16.1z M5,16c0,0.1,0,0.2,0.1,0.2c0,0,0.1-0.1,0.1-0.2c0-0.1,0-0.1,0-0.2C5.1,15.9,5,16,5,16z M23.9,15L23.9,15
L23.9,15L23.9,15l-0.1-0.1l0,0h-2.5v0l0.1,0.1l0.1,0.2l0.1,0.2l0.1,0.2l0,0.2l0,0.2l0,0.2l0,0.1l0,0.1l0,0l0,0l0,0l0,0l0,0l1.8,0
l0,0l0,0l0,0l0,0l0,0l0,0l0-0.2l0-0.1l0-0.1l0-0.1l0-0.1l0-0.1l0-0.1l0-0.2L23.9,15z M3.4,14.7c0.5-0.8,1.4-1.3,2.3-1.3
c0.9,0,1.8,0.5,2.3,1.3h6.7c0,0,0,0,0,0V7.4c0,0,0-0.1-0.1-0.1H2.3c0,0-0.1,0-0.1,0.1v7.3c0,0,0,0,0,0H3.4z M5.9,15.6
c0-0.1-0.1-0.1-0.2-0.1c-0.1,0-0.1,0.1-0.2,0.1c0,0,0.1,0,0.2,0C5.8,15.7,5.8,15.7,5.9,15.6z M19.1,16c0,0.1,0,0.2,0.1,0.2
c0,0,0.1-0.1,0.1-0.2c0-0.1,0-0.1,0-0.2C19.1,15.9,19.1,16,19.1,16z M19.4,16.8c-0.1,0-0.1-0.1-0.2-0.1c0,0.1,0,0.2,0.1,0.2
c0.1,0,0.1,0,0.2,0C19.5,16.9,19.5,16.8,19.4,16.8z M20.3,16.1c0,0.1,0,0.1,0.1,0.2c0.1-0.1,0.1-0.1,0.1-0.2c0-0.1-0.1-0.1-0.2-0.1
C20.3,16,20.3,16,20.3,16.1z M19.1,14.4l0.1,0l0.1,0l0.1,0l0.1,0l0.1,0l0.1,0l0.1,0l0.1,0l0.1,0l0.1,0l0.1,0.1l0.1,0.1l0.1,0.1
l0.1,0.1l0,0l0,0l0,0h2.1V14h0.1c0.1,0,0.1,0,0.1-0.1c0-0.1,0-0.1-0.1-0.1h-0.1l0,0l0,0l0,0v-0.1h0.2c0.1,0,0.1,0,0.1-0.1
s0-0.1-0.1-0.1h-0.2l0-0.1l0,0h0.2c0.1,0,0.1,0,0.1-0.1c0-0.1,0-0.1-0.1-0.1h-0.2l0-0.1l0,0h0.1c0.1,0,0.1,0,0.1-0.1
c0-0.1,0-0.1-0.1-0.1h-0.1l0-0.1l0-0.1l0-0.1h0.1l0-0.3l0-0.1l0,0l0,0l0-0.1l0,0l0,0l-0.1,0l0-0.1l-0.3-0.1l-0.3-0.1l-0.3-0.1
l-0.3-0.1l-0.3-0.1L21,11.3l-0.3,0l-0.3,0l-0.3,0l-0.3,0l-0.1,0l-0.1,0l-0.1,0l-0.1,0l0,0v0l0-0.1l-1-1.9l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l-0.1,0l-0.5,0l-0.5,0l-0.5,0l-0.5,0l-0.5,0l-0.5,0l0,0l0,0l0,0l0,0l0,0l0,0.2l0,0.6l0,0.2l0,1l0,1l0,1v1.5h1.4v-0.1h0.3
v0.1l0,0l0,0l0,0l0,0l0,0V15h0.7l0,0l0,0.1l0,0.2l0,0.2l0,0.2l0,0.2l0,0.2l0,0.2h0.5l0,0l0,0l0,0l0,0l0,0l0,0l0-0.1l0-0.1l0-0.1
l0-0.1l0-0.1l0.1-0.1l0.1-0.1l0.1-0.1l0.1-0.1l0.1-0.1l0.1-0.1l0.1-0.1l0.1-0.1l0.1-0.1l0.1-0.1l0.1-0.1L19.1,14.4L19.1,14.4z
M16.2,13.1L16.2,13.1L16.2,13.1L16.2,13.1l-0.5,0l0,0l0,0l0,0v-0.5l0,0l0,0l0,0h0.5l0,0l0,0l0,0l0,0.2v0.2L16.2,13.1z M17.9,11.6
L17.9,11.6L17.9,11.6l-0.1,0l0,0l-0.1-0.1l-0.1,0l-0.1,0l-0.1,0l-0.1,0l-0.1,0l-0.1,0l-1.1-0.1l0,0l0,0l0,0l0,0l0,0l0-1.4l0,0l0,0
l0,0l0,0l0,0l0.6,0l0.6,0l0.6,0l0.1,0l0.1,0l0,0l0,0L17.9,11.6L17.9,11.6z M18,11.6L18,11.6L18,11.6L18,11.6l-0.1-1.8l0,0l0,0l0,0h0
l0,0l0,0l0,0l0.2,0.4l0.2,0.5l0,0.1l0,0.1l0,0.1l0,0.1v0.4l0,0l0,0l0,0l0,0l0,0L18,11.6L18,11.6L18,11.6z M19.9,15.6
c0-0.1-0.1-0.1-0.2-0.1c-0.1,0-0.1,0.1-0.2,0.1c0,0,0.1,0,0.2,0C19.8,15.7,19.9,15.7,19.9,15.6z M19.8,15.3c-0.5,0-0.9,0.4-0.9,1
c0,0.5,0.4,1,0.9,1c0.5,0,0.9-0.4,0.9-1C20.7,15.8,20.3,15.3,19.8,15.3z M19.8,17.2c-0.5,0-0.8-0.4-0.8-0.9c0-0.5,0.4-0.9,0.8-0.9
c0.5,0,0.8,0.4,0.8,0.9C20.6,16.8,20.2,17.2,19.8,17.2z M20.1,16.8c-0.1,0-0.1,0.1-0.1,0.1c0.1,0,0.1,0,0.2,0c0.1,0,0.1-0.1,0.1-0.2
C20.2,16.7,20.2,16.8,20.1,16.8z M19.8,14.4c-1,0-1.7,0.8-1.7,1.8c0,1,0.8,1.8,1.7,1.8c1,0,1.7-0.8,1.7-1.8
C21.5,15.3,20.7,14.4,19.8,14.4z M19.8,17.4c-0.6,0-1-0.5-1-1.1c0-0.6,0.5-1.1,1-1.1c0.6,0,1,0.5,1,1.1
C20.8,16.9,20.3,17.4,19.8,17.4z M5.7,15.3c-0.5,0-0.9,0.4-0.9,1c0,0.5,0.4,1,0.9,1c0.5,0,0.9-0.4,0.9-1C6.6,15.8,6.2,15.3,5.7,15.3
z M5.7,17.2c-0.5,0-0.8-0.4-0.8-0.9c0-0.5,0.4-0.9,0.8-0.9c0.5,0,0.8,0.4,0.8,0.9C6.5,16.8,6.2,17.2,5.7,17.2z M5.7,14.4
c-1,0-1.7,0.8-1.7,1.8c0,1,0.8,1.8,1.7,1.8c1,0,1.7-0.8,1.7-1.8C7.5,15.3,6.7,14.4,5.7,14.4z M5.7,17.4c-0.6,0-1-0.5-1-1.1
c0-0.6,0.5-1.1,1-1.1c0.6,0,1,0.5,1,1.1C6.7,16.9,6.3,17.4,5.7,17.4z M16.5,15h-1.8V15H7.9c-0.4-0.8-1.3-1.3-2.2-1.3
c-0.9,0-1.7,0.5-2.2,1.3H2.2C2,15,1.9,15.1,2,15.3l0.2,0.4c0.2,0.4,0.6,0.7,0.9,0.7s0.6,0,0.6,0c0,0,0-0.1,0-0.1
c0-0.5,0.2-1,0.5-1.4c0.1-0.2,0.3-0.3,0.4-0.4c0,0,0,0,0,0c0,0,0.1,0,0.1-0.1c0,0,0,0,0,0c0,0,0.1,0,0.1,0c0,0,0,0,0,0
c0,0,0.1,0,0.1,0c0,0,0,0,0,0c0.1,0,0.1-0.1,0.2-0.1c0,0,0,0,0,0c0,0,0.1,0,0.1,0c0,0,0,0,0,0c0,0,0,0,0.1,0c0,0,0,0,0,0
c0,0,0,0,0.1,0c0,0,0,0,0,0c0,0,0.1,0,0.1,0c0,0,0,0,0,0c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0,0,0,0,0,0c0,0,0.1,0,0.1,0c0,0,0,0,0,0
c0,0,0,0,0.1,0c0,0,0,0,0,0c0,0,0,0,0.1,0c0,0,0,0,0,0c0,0,0.1,0,0.1,0c0,0,0,0,0,0c0.1,0,0.1,0.1,0.2,0.1c0,0,0,0,0,0
c0,0,0.1,0,0.1,0c0,0,0,0,0,0c0,0,0.1,0,0.1,0c0,0,0,0,0,0c0,0,0.1,0,0.1,0.1c0,0,0,0,0,0c0.1,0.1,0.2,0.2,0.4,0.3
c0,0,0.1,0.1,0.1,0.1c0,0,0,0.1,0.1,0.1c0.3,0.4,0.4,0.8,0.4,1.3c0,0,0,0.1,0,0.1H17l0-0.3l0-0.2v0l0,0l0-0.2l0,0l0,0l0-0.2l0,0l0,0
l0-0.2l0,0l0,0l0-0.1h-0.6V15z"/>
</svg>
谢谢，如果需要，我会尽可能地澄清！
编辑：记录svgObject会给一个对象提供键：值对：
./movers.svg:"9fa427b3a238b5ef5d5e350ea4ed4c18.svg"
HTMl参考是：
<img class="category-icon" src="9fa427b3a238b5ef5d5e350ea4ed4c18.svg">
Dist看起来像这样：
/dist
9fa427b3a238b5ef5d5e350ea4ed4c18.svg
index.html
main.js
同样，必须将文件放在以下位置：
/app
/public
/images
9fa427b3a238b5ef5d5e350ea4ed4c18.svg (maybe? Or does this need to be in javascripts? both don't work...I think the paths are in main.js)
/javascripts
main.js
/data
/stylesheets
index.html