Best way to pass Icon / Img URLs in React as Props?

JavaScript
2

In your .json file, the property icon of each object literal in the array is a string. So, you’re passing an icon string to DailyWorkout instead of the icon ‘itself’ (imported from png files).

Instead of importing the info from a .json file you can import from a .js file that exports the array.
From this .js you can import the images.

For example

dailyWorkouts.js

import runImg from './img/run.png';
import bikeImg from './img/bike.png';


export default [
 { 
  /* other properties */,
  icon: runImg
 },
 { 
  /* other properties */,
  icon: bikeImg
 },
 ...
]

From your App.js you can do:
import dailyWorkouts from './path/to/dailyWorkouts'

in this case, dailyWorkouts[0].icon is in fact the icon object, not a string

1 Like