Menu
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'
]
}
736
How to Install React Icons. To install the react-icons library, do the following: In your project folder, open the terminal of your code editor. Run the command npm install react-icons to install the library in your project folder.
You can do some quick and dirty bash tricks (like lsa ) and with your editor (multi-cursor/find-and-replace) to get the filenames and make that index. js file once. Then adding to it will not take much effort. But it's probably better to use a script that can generate an "exports file" on demand from a folder of svgs.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
