js: あるディレクトリにある画像ファイルをすべてimportする方法

Question

晴れ、雨、曇、など天気を表すアイコン画像を一つのディレクトリにまとめて格納しています。

JSファイルにそれらの画像ファイルをすべてimportして使いたいのですが、各画像ファイルを以下のように一つずつimportしないといけないのでしょうか。

import Clear from "../lib/clear.svg"
import Fog from "../lib/fog.svg"
import Rain from "../lib/rain.svg"
...

開発環境は以下にて行っております。
・Ruby on Rails
・React

Comments

[m.ts10806]

Node.jsではないのですよね

[m.ts10806]

＞fog.fog
転記ミスですか？

[hoshi-takanori]

そのディレクトリに　index.js を作ってすべての画像ファイルを import/export すれば良いのでは。

[Lhankor_Mhy]

「es6 import glob」でググったらそれっぽいライブラリがありました。

[taisuke-salty]

コメントありがとうございます。
Reactで開発を行っているので、Node.jsになると思います。
fog.fogはミスでしたので修正いたしました。

[taisuke-salty]

＞そのディレクトリに　index.js を作ってすべての画像ファイルを import/export すれば良いのでは。

以下のような流れにするという認識でお間違い無いでしょうか。
・index.jsにすべてimport
・index.jsですべての画像をもつオブジェクト imgsをエクスポート
export const imgs = {clear: Clear, fog: Fog, rain: Rain}

・画像を使うファイルでimgsをimportし、imgs.clear として画像を使う

[taisuke-salty]

＞「es6 import glob」でググったらそれっぽいライブラリがありました。

内容確認してみます。