How to render custom svg in IconLayer of Deck.gl - reactjs

Question

i am trying to render a custom svg in iconLayer when a particular condition is met, from this example, https://deck.gl/gallery/icon-layer my getIcon option is
getIcon: (d) => ({
url: './glow.svg',
width: 128,
height: 128
}),
I think the url is meant to be the path to the image i want to render
However, nothing is been shown on the map.
the full component is
import { IconLayer } from "#deck.gl/layers";
import icons from "../assets/images/monsoon_icons.png";
const COLORS = {
...colors
};
const ICON_MAPPING = {
circle: { x: 0, y: 0, width: 70, height: 70, mask: true },
rectangle: { x: 70, y: 0, width: 70, height: 70, mask: true },
triangle: { x: 140, y: 0, width: 70, height: 70, mask: true },
star: { x: 210, y: 0, width: 70, height: 70, mask: true },
};
export const RenderLayers = (props) => {
let { data } = props;
if(props.isSaved) {
return [
new IconLayer({
...other icon props
// iconMapping: ICON_MAPPING,
getIcon: (d) => ({
url: './glow.svg',
width: 128,
height: 128
}),
...other icon props,
}),
new IconLayer({
...other icon props
// iconMapping: ICON_MAPPING,
getIcon: (d) => ({
url: './glow.svg',
width: 128,
height: 128
}),
...other icon props,
}),
];
};
if (!data?.length) {
console.log("NO DATA TO MAP");
return;
};
return [
new IconLayer({
...normal icon layer props
})
];
};

Answer 1

You would need to convert your svg to data URLs.
Following the official deck.gl example:
import yourSvg from 'whatever/path';
function svgToDataURL(svg) {
return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
}
new IconLayer({
getIcon: () => ({
url: svgToDataURL(yourSvg),
width: 24,
height: 24
}),
})
Also, you can check a full working example here.
Cheers!