如何有效地为React中的Google地图标记导入图标？

Question

我的图标文件夹中有20个图标，例如p1.png，p2.png，p3.png，...，p20.png。目前，我必须导入20个图标才能将其用于Google地图标记。有没有更好的方法来明智地导入图标？或者有更好的方法来在React中而不是导入中加载图标？我使用的图标数量取决于json结果的长度。

import p1IconUrl from "./icon/p1.png";
import p2IconUrl from "./icon/p2.png";

for (var i = 0; i < json.length; i++) {
    var pickup = json[i].pickupLocation.split(",");
    var deliver = json[i].deliverLocation.split(",");
    rows.push(<Marker label= {(i+1).toString()} position={{ lat: parseFloat(pickup[0]), lng: parseFloat(pickup[1]) }}  
    icon={{url: p1IconUrl ,
            labelOrigin: new window.google.maps.Point(16, 24)
            }}

     />);
    rows.push(<Marker label= {(i+1).toString()} position={{ lat: parseFloat(deliver[0]), lng: parseFloat(deliver[1]) }}  
    icon={{url: p1IconUrl ,
            labelOrigin: new window.google.maps.Point(16, 10)
            }}
    />);
}

我尝试直接将"./icon/p2.png"输入{{1}}到我的图标URL中，但没有导入，但是它不会加载该图标。