导入大量的图标

Question

我正试图通过AccuWeather API建立一个天气应用程序，每种类型的天气都有图标，例如:

风，雨，云，列表继续，我在一个文件夹里总共有44个不同的图标图像有没有一种更有组织的方式导入它们的方法?现在，我以这种方式手动导入它们:

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>

如你所见，的导入真的很难看，有办法绕过它吗?

Answer 1

不是静态的

如果你正在使用Webpack，你可以使用require.context来动态映射需求，但在这种情况下，我不会麻烦它，因为获得这些模块要困难得多，并且不再是静态分析的。

如果你愿意，你可以写一个程序，通过列出目录的内容并写出imports来为你创建那个文件。