Dynamically importing an svg in React - reactjs

Question

I have a dumb component that gets passed down props from a weatherAPI. I want to be able to dynamically change the SVG image depending on what gets sent back from the API. I have installed an npm module react-svg: https://github.com/atomic-app/react-svg. This has a dependency of svg-injector: https://www.npmjs.com/package/svg-injector which I have also installed. Now, I have imported react-svg -> import ReactSVG from 'react-svg';. I then implemented it with inside my dumb component:
const WeatherReport = ({report}) => {
return (
<div style={styles.body} className="row">
<div style={styles.weatherBoxContainer}>
<div className="col-sm-2 col-md-offset-1" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
<ReactSVG path={'RELATIVE TO DOCUMENT ROOT I'M SERVING FROM'} callback={(svg) => console.log(svg)} />
<div className="row" style={styles.weatherBoxContainer.temps}>
<div className="col-sm-4" style={styles.weatherBoxContainer.tempMinMax}>
<div>{Math.floor(report.list[0].main.temp_max)}°</div>
<div>{Math.floor(report.list[0].main.temp_min)}°</div>
</div>
<div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
{Math.floor(report.list[0].main.temp)}°
</div>
</div>
</div>
CA
</div>
<div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
<div className="row" style={styles.weatherBoxContainer.temps}>
<div className="col-sm-4" style={styles.weatherBoxContainer.tempMinMax}>
<div>{Math.floor(report.list[1].main.temp_max)}°</div>
<div>{Math.floor(report.list[1].main.temp_min)}°</div>
</div>
<div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
{Math.floor(report.list[1].main.temp)}°
</div>
</div>
</div>
UT
</div>
<div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
<div className="row" style={styles.weatherBoxContainer.temps}>
<div className="col-sm-4" style={styles.weatherBoxContainer.tempMinMax}>
<div>{Math.floor(report.list[2].main.temp_max)}°</div>
<div>{Math.floor(report.list[2].main.temp_min)}°</div>
</div>
<div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
{Math.floor(report.list[2].main.temp)}°
</div>
</div>
</div>
MN
</div>
<div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
<div className="row" style={styles.weatherBoxContainer.temps}>
<div className="col-sm-4" style={styles.weatherBoxContainer.tempMinMax}>
<div>{Math.floor(report.list[3].main.temp_max)}°</div>
<div>{Math.floor(report.list[3].main.temp_min)}°</div>
</div>
<div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
{Math.floor(report.list[3].main.temp)}°
</div>
</div>
</div>
DC
</div>
<div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
<div className="row" style={styles.weatherBoxContainer.temps}>
<div className="col-sm-4" style={styles.weatherBoxContainer.tempMinMax}>
<div>{Math.floor(report.list[4].main.temp_max)}°</div>
<div>{Math.floor(report.list[4].main.temp_min)}°</div>
</div>
<div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
{Math.floor(report.list[4].main.temp)}°
</div>
</div>
</div>
NY
</div>
</div>
</div>
);
};
WeatherReport.propTypes = {
report: PropTypes.object
};
export default WeatherReport;
Now, ReactSVG's path needs to be relative to the document root you're serving from NOT relative to the js file that contains ReactSVG. Simple enough right? However, I am using babel and everything is being served as JS, into one file. I am quite new to webpack, babel, react and redux for that matter... Any suggestions on how I am suppose to hit the path to my svg when everything is being compiled into one file?

Answer 1

Assuming the output from your build step in webpack is into a /dist/ folder off your root (for example) you would also want to have a build step to copy any other external files in that folder such as your svg file.
/dist
|- bundle.js
|- myart.svg
Then in your file you can reference the svg simply as
<ReactSVG path="myart.svg" />