OpenLayers WebGLPointsLayer conditional symbol source - webgl

Question

I work with the new feature from openLayers: https://openlayers.org/en/latest/examples/webgl-points-layer.html
and want to achieve to have some case transform operator like in the color array, but for the src string
thunderstorm: {
symbol: {
symbolType: "image",
src: `data:image/svg+xml;utf8,${icon(faThunderstorm, {
transform: {
size: 14,
},
attributes: {
stroke: "black",
"stroke-width": "30",
color: "white",
},
}).html[0]}`,
color: [
"case",
["==", ["get", "type"], "cloud-to-ground"],
"rgb(247, 37, 133)",
["==", ["get", "type"], "inter-cloud"],
"rgb(72, 12, 168)",
"rgb(255, 255, 255)", // fallback
],
size: [20, 20],
anchor: [0.5, 0.5],
rotateWithView: false,
},
},
I tried something like this, but it doesn't resolve the string:
thunderstorm: {
symbol: {
symbolType: "image",
src: [
"case",
["==", ["get", "type"], "cloud-to-ground"],
`data:image/svg+xml;utf8,${icon(faBolt, {
transform: {
size: 14,
},
attributes: {
stroke: "black",
"stroke-width": "30",
color: "white",
},
}).html[0]}`,
["==", ["get", "type"], "inter-cloud"],
`data:image/svg+xml;utf8,${icon(faThunderstorm, {
transform: {
size: 14,
},
attributes: {
stroke: "black",
"stroke-width": "30",
color: "white",
},
}).html[0]}`,
`data:image/svg+xml;utf8,${icon(faBolt, {
transform: {
size: 14,
},
attributes: {
stroke: "black",
"stroke-width": "30",
color: "white",
},
}).html[0]}`, // fallback
],
[...]
},
},
and will throw these WebGL errors:
WebGL: INVALID_VALUE: texImage2D: bad image data
[.WebGL-0x12b2a1000]RENDER WARNING: texture bound to texture unit 0 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)?
Any idea how to implement the transform operation, for having to different kind of icons for one style (JSON)?
(I looked into this one: https://openlayers.org/en/latest/examples/icon-sprite-webgl.html
but don't know how to build the "A very simple sprite atlas is used in the form of a PNG file containing all icons on a grid.")