一次性 import 整个目录下的所有 svg 文件（TypeScript）

思考

最近做的记账项目和造轮子都反复需要引入很多 svg，如果一个一个引入的话，就会变成这样：

import confirm from './icons/confirm.svg'
import del from './icons/delete.svg'
import right from './icons/right.svg'
import left from './icons/left.svg'

想到如果后续需要引入几十个 svg，那岂不是要写几十个 import…… （想想就头疼），于是便开始在网上搜索有没有相关的思路和解决办法。最终在自己的项目里成功使用后，准备记录下下面的这一段代码，方便自己之后复用，同时也分享给大家。

一次性 import 整个目录下的所有 svg 文件

let importAll = (requireContext: __WebpackModuleApi.RequireContext) => 
    requireContext.keys().forEach(requireContext);
// 考虑到单元测试，这里加入 try catch
try {
    importAll(require.context('./icons', true, /.svg$/));
} catch (error) {
    console.log(error);
}

写入这几行代码后，就可以直接引入整个 icons 目录，之后要加入新的 svg 文件也直接放入 icons 目录中就好。

也可以根据模块化的思想，将上面的这段代码创建为一份单独的文件importIcons.ts，然后在需要使用的地方 import 使用：import './importIcons.ts';