CODEWITHSUNDEEP
javascriptreactjs
Oded
Oded

Reputation: 73

import massive amount of icons

I am trying to build a weather app via AccuWeather API there are icons for every type of weather for example:

Wind, Rain Cloudy, and the list keep going I have in total 44 different icons images in a folder there is a way to import them in a more organized way? for now, i imported them manually in this way :

import N1 from '../Weather icons/01-s.png';
import N2 from '../Weather icons/02-s.png';
import N3 from '../Weather icons/03-s.png';
import N4 from '../Weather icons/04-s.png';
import N5 from '../Weather icons/05-s.png';
import N6 from '../Weather icons/06-s.png';
import N7 from '../Weather icons/07-s.png';
import N8 from '../Weather icons/08-s.png';
import N11 from '../Weather icons/11-s.png';
import N12 from '../Weather icons/12-s.png';
import N13 from '../Weather icons/13-s.png';
import N14 from '../Weather icons/14-s.png';
import N15 from '../Weather icons/15-s.png';
import N16 from '../Weather icons/16-s.png';
import N17 from '../Weather icons/17-s.png';
import N18 from '../Weather icons/18-s.png';
import N19 from '../Weather icons/19-s.png';
import N20 from '../Weather icons/20-s.png';
import N21 from '../Weather icons/21-s.png';
import N22 from '../Weather icons/22-s.png';
import N24 from '../Weather icons/24-s.png';
import N25 from '../Weather icons/25-s.png';
import N26 from '../Weather icons/26-s.png';
import N29 from '../Weather icons/29-s.png';
import N30 from '../Weather icons/30-s.png';
import N31 from '../Weather icons/31-s.png';
import N32 from '../Weather icons/32-s.png';
import N33 from '../Weather icons/33-s.png';
import N34 from '../Weather icons/34-s.png';
import N35 from '../Weather icons/35-s.png';
import N36 from '../Weather icons/36-s.png';
import N37 from '../Weather icons/37-s.png';
import N38 from '../Weather icons/38-s.png';
import N39 from '../Weather icons/39-s.png';
import N40 from '../Weather icons/40-s.png';
import N41 from '../Weather icons/41-s.png';
import N42 from '../Weather icons/42-s.png';
import N43 from '../Weather icons/43-s.png';
import N44 from '../Weather icons/44-s.png';
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

as you can see the import is really ugly, there is a way to bypass it?

Upvotes: 0

Views: 41

Answers (1)

AKX
AKX

Reputation: 168996

Not in a static way.

If you're using Webpack, you could use require.context for a dynamic map of requirements, but in this case I'd not bother with it, since getting hold of those modules is a lot harder and no longer statically analyzable.

If you like, though, you could write a program that creates that file for you by listing a directory's contents and writing out the imports.

Upvotes: 1

Related Questions