React Import Icons / Images in bulk

Question

I have 100's of Icons and Images to be imported. Is there any way to eliminate writing so many import statements at the top of the page? I was thinking to write a import statements in a separate file and embed that at the top.

import basicAmenitiesIcon from '../../../../images/icons/wifi-sign.png';
import parkingIcon from '../../../../images/icons/parking.png';
...

Any other way of solving it? I'm using webpack and here is the config:

{
    test: /\.(jpe?g|png|gif|svg)$/i,
    loaders: [
        'file?hash=sha512&digest=hex&name=[hash].[ext]',
        'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
    ]
}

why do not you use font image.. that will faster and no need to right import for each and every icon. — Khalid Azam, Jan 01 '17 at 06:48

score 5 · Accepted Answer · edited May 23 '17 at 11:46

5

Yes, it is posible, see my answer here: https://stackoverflow.com/a/41410938/646156

var context = require.context('../../../../images/icons', true, /\.(png)$/);
var files={};

context.keys().forEach((filename)=>{
  files[filename] = context(filename);
});
console.log(files); //you have file contents in the 'files' object, with filenames as keys

edited May 23 '17 at 11:46

Community

1
1

answered Dec 31 '16 at 19:03

Tudor Ilisoi

2,934
23
25

and may I add there's a similar accepted answer on the question I referenced you to – Tudor Ilisoi Dec 31 '16 at 19:04
Was waiting for this. Thank you. – Deepak Bandi Dec 31 '16 at 19:22

React Import Icons / Images in bulk

1 Answers1