Javascript 从精灵表中提取单个图标，并将每个图标存储到React.js中的数组中

我有一张从网站上获取的spritesheet，让我们以这张为例：

加载spritesheet时，我希望提取每个图标，并将每个图标存储在我的React组件的数组中

我的代码如下所示：

    var ICON_WIDTH = 36
    var ICON_HEIGHT = 36
    var ICONS_PER_ROW = 4
    var img = new Image();
    img.crossOrigin = "anonymous"
    img.src = "sprite.png";
    
    //if image is loaded then extract individual icons (how to check if image is loaded in React?)
    for (var i = 0; i < 8; i++) {
        var offsetY = Math.ceil(i / ICONS_PER_ROW) * ICON_HEIGHT
        var offsetX = (i % ICONS_PER_ROW) * ICON_WIDTH
        var iconCanvas = document.createElement("canvas")
        iconCanvas.width = ICON_WIDTH
        iconCanvas.height = ICON_HEIGHT
        var iconCtx = iconCanvas.getContext("2d")
        iconCtx.drawImage(this, offsetX, offsetY, ICON_WIDTH, ICON_HEIGHT, 0, 0, ICON_WIDTH, ICON_HEIGHT)
        var span = document.createElement("span")
        span.appendChild(iconCanvas)

        //Not sure what to do after this e.g. how to store each icon in an array in this React component
    }

var图标\u宽度=36
变量图标高度=36
变量图标每行=4
var img=新图像（）；
img.crossOrigin=“匿名”
img.src=“sprite.png”；
//如果图像已加载，则提取单个图标（如何检查图像是否已加载到React？）
对于（变量i=0；i<8；i++）{
var offsetY=Math.ceil（每行i/ICONS）*ICON\u高度
var offsetX=（每行图标百分比）*图标宽度
var iconCanvas=document.createElement（“画布”）
iconCanvas.width=图标宽度
iconCanvas.height=图标高度
var iconCtx=iconCanvas.getContext（“2d”）
drawImage（this、offsetX、offsetY、图标宽度、图标高度、0、0、图标宽度、图标高度）
var span=document.createElement（“span”）
span.appendChild（iconCanvas）
//不确定在此之后要做什么，例如如何将每个图标存储在此组件中的数组中
}