title: How can I create SDF-Icon's (used in Mapbox) from PNG?
body: <p>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(<a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-symbol-icon-color" rel="noreferrer">https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-symbol-icon-color</a>).</p>
  <p>By Hour's of searching i couldn't found the easiest way to achieve this. There is an npm module I found is <a href="https://www.npmjs.com/package/image-sdf" rel="noreferrer">https://www.npmjs.com/package/image-sdf</a> 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.</p>
  <p>The command I am using</p>
  <pre><code>image-sdf cycle-initial.png --spread 5 --downscale 1 --color black &gt; cycle.png
  </code></pre>
  <p>cycle-initial.png(INPUT) is below:</p>
  <p><a href="https://i.stack.imgur.com/xjE5X.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xjE5X.png" alt="enter image description here" /></a></p>
  <p>cycle.png(OUTPUT) is below:</p>
  <p><a href="https://i.stack.imgur.com/0K4GY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0K4GY.png" alt="enter image description here" /></a></p>
  <p>But while using the cycle.png as an Image src is not giving the finest results.</p>
  <p><a href="https://i.stack.imgur.com/KDYJc.png" rel="noreferrer"><img src="https://i.stack.imgur.com/KDYJc.png" alt="enter image description here" /></a></p>
  <p>Code snippet:</p>
  <pre><code>const img = new Image();
  img.addEventListener('load', () =&gt; {
              this.mapInstance.addImage('circle-icon', img, { sdf: true });
          }, false);
  img.src = cycle;
  </code></pre>
  <p>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.</p>