时间戳

首页 > 解决方案 > 导入大量图标

javascript - 导入大量图标

问题描述

我正在尝试通过 AccuWeather API 构建一个天气应用程序，每种天气都有图标，例如：

Wind, Rain Cloudy 和列表​​继续我在一个文件夹中总共有 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>

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

标签： javascriptreactjs

解决方案

不是静态的。

如果你使用 Webpack，你可以使用require.context动态的需求图，但在这种情况下我不会打扰它，因为掌握这些模块要困难得多，而且不再是静态可分析的。

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

推荐阅读