My task is to change the icon-color of an icon-image in Mapbox. The only way mapbox allow to do this is by using sdf-icons(<https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-symbol-icon-color>).

By Hour's of searching i couldn't found the easiest way to achieve this. There is an npm module I found is <https://www.npmjs.com/package/image-sdf> but after using its command on a png to convert it into sdf and then rendering on a map is not giving me finest results.

The command I am using

```
image-sdf cycle-initial.png --spread 5 --downscale 1 --color black > cycle.png

```

cycle-initial.png(INPUT) is below:

[![enter image description here](https://i.stack.imgur.com/xjE5X.png)](https://i.stack.imgur.com/xjE5X.png)

cycle.png(OUTPUT) is below:

[![enter image description here](https://i.stack.imgur.com/0K4GY.png)](https://i.stack.imgur.com/0K4GY.png)

But while using the cycle.png as an Image src is not giving the finest results.

[![enter image description here](https://i.stack.imgur.com/KDYJc.png)](https://i.stack.imgur.com/KDYJc.png)

Code snippet:

```
const img = new Image();
img.addEventListener('load', () => {
            this.mapInstance.addImage('circle-icon', img, { sdf: true });
        }, false);
img.src = cycle;

```

I request if anyone, please help me if I am doing anything wrong here, or is there any correct way to create sdf-icon to render correctly.