0

I have a lot of image imports into a relatively short .jsx file. I was wondering what is the best practice for imports, can I store these in a separate file and just import as one line item?

import increaseIcon from '../../../../src/assets/xSmall_Arrow-NE.svg';
import equalIcon from '../../../../src/assets/xSmall_Equal.svg';
import decreaseIcon from '../../../../src/assets/xSmall_Arrow-SE.svg';
import lowBatteryIcon from '../../../../src/assets/xSmall_Battery-low.svg';
import checkIcon from '../../../../src/assets/xSmall_Check.svg';
import lowDataIcon from '../../../../src/assets/xSmall_Data-low.svg';
import moreIcon from '../../../../src/assets/xSmall_More.svg';
import triangleDownIcon from '../../../../src/assets/xSmall_Arrow-dropdown.svg';
import infoIcon from '../../../../src/assets/xSmall_Info.svg';
import backIcon from '../../../../src/assets/Small_Back.svg';
import checkedIcon from '../../../../src/assets/Small_Box-checked.svg';
import disableIcon from '../../../../src/assets/Small_Box-disable.svg';
import smallBurgerIcon from '../../../../src/assets/Small_Burger-menu.svg';
import chartIcon from '../../../../src/assets/Small_Chart.svg';
import smallCloseIcon from '../../../../src/assets/Small_Close.svg';
import dashboardIcon from '../../../../src/assets/Small_Dashboard.svg';
import downloadIcon from '../../../../src/assets/Small_Download.svg';
import hivesIcon from '../../../../src/assets/Small_Hives.svg';
import smallInfoIcon from '../../../../src/assets/Small_Info.svg';
import layersIcon from '../../../../src/assets/Small_Layers.svg';
import listIcon from '../../../../src/assets/Small_List.svg';
import locationIcon from '../../../../src/assets/Small_Location.svg';
import notificationIcon from '../../../../src/assets/Small_Mobile-Menu-Notification.svg';
import passHideIcon from '../../../../src/assets/Small_pass-Hide.svg';
import passShowIcon from '../../../../src/assets/Small_pass-Show.svg';
import radioCheckedIcon from '../../../../src/assets/Small_Radio-checked.svg';
import radioUncheckedIcon from '../../../../src/assets/Small_Radio-unchecked.svg';
import shareIcon from '../../../../src/assets/Small_Share.svg';
etc...
ksenia
  • 187
  • 7
  • 23
  • rename the file like `increaseIcon.svg`, and then do `import {increaseIcon, ...etc} from '../../../../src/assets/*.svg` else your stuck with what you have – Lawrence Cherone Sep 23 '20 at 15:52
  • does that actually work? I tried with import {MediumBack, MediumClose, MediumNotification, MediumBurgerMenu} from '../../../../src/assets/*.svg'; and got Module Not Found, Can't resolve '../../../../src/assets/*.svg' – ksenia Sep 23 '20 at 16:08
  • it works with webpack and parceljs out of the box, you might need tweak config, check if `import icons from '../../../../src/assets/*.svg` with a `console.log(icons)` underneath, if so just change the names and export again for same behaviour as mentioned above which you should do anyway, you wouldn't want this import hell in every file – Lawrence Cherone Sep 23 '20 at 16:13
  • 'tweak config'is important here.. any suggestions on this? – ksenia Sep 23 '20 at 16:27
  • 1
    dont know your setup, use require with a loop if you dont want to fiddle with webpack etc https://stackoverflow.com/questions/42118296/dynamically-import-images-from-a-directory-using-webpack, or search *es6 import multiple images* will yield other solutions – Lawrence Cherone Sep 23 '20 at 16:30

0 Answers0