I have a dumb component that is passed by the details from weatherAPI. I want to be able to dynamically change the SVG image depending on what will be sent back from the API. I installed the npm react-svg module: https://github.com/atomic-app/react-svg . This has a dependency on svg-injector : https://www.npmjs.com/package/svg-injector , which I also installed. Now I have imported react-svg import ReactSVG from 'react-svg'; . Then I implemented it inside my silent 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 the ReactSVG path should be relative to the root of the document you are serving from NOT relative to the js file that contains ReactSVG. Simple enough? However, I use babel, and everything works as JS in a single file. I am completely new to webpack , babel , react and redux , for that matter ... Any suggestions on how I assume to get in the path to my svg when everything compiles to a single file
reactjs webpack babeljs svg
Nappstir
source share