PNG Icons may show black background/border

[kevinmarrec]

Related to https://github.com/kevinmarrec/nuxt-pwa-module/issues/48#issuecomment-1276482397

[raducretu]

This is a problem purely on the actual PNG being generated with inner empty space

[raducretu]

This can be solved by documenting the maskablePadding parameter on the icon config option, which by default has 20

[kevinmarrec]

Thank you for your feedback @raducretu , I'm gonna work on a documentation website which will be the next iteration of https://pwa.nuxtjs.org.

[kevinmarrec]

Solution in case of incoherent color behaviors with PNG icons

export default defineNuxtConfig({
  pwa: {
    icon: {
      maskablePadding: 0
    }
  }
})

Tracking documentation in #82 , closing this.

[larrasu]

Solution in case of incoherent color behaviors with PNG icons

export default defineNuxtConfig({
  pwa: {
    icon: {
      maskablePadding: 0
    }
  }
})

Tracking documentation in #82 , closing this.

Unfortunately, this doesn't solve it. I'm still getting the black background even though my icon doesn't have transparency.

[kevinmarrec]

@larrasu Could you share full PWA options you're giving, as well as original icon ? thanks !

[JamieCurnow]

@larrasu @kevinmarrec I had this same issue that the icon still had a black border after changing maskablePadding to 0. Turns out that the icons get cached in the node_modules/.cache directory and changing the padding did not purge the cache.

To fix it I deleted the node_modules/.cache dir, and the .nuxt dir (just for good measure) and then ran npm run dev again and the icons were re-generated.

Interestingly, I'm deploying on netlify and the cache dir was also being cached along with node_modules on netlify too so I still saw the issue once I pushed up to production. I fixed that by purging the netlify cache and rebuilding which re-installs node modules etc from scratch. Then it was working perfectly! 🙌

Thanks for your work on this module @kevinmarrec - it's great!!

[larrasu]

@JamieCurnow Omg, thank you!! I've been trying to figure out why it won't regenerate my icon.

@kevinmarrec I guess that solves the issue. It would be better to include this in the docs/README for good measure? I had to dig up this issue to fix this. Thank you so much for this amazing module by the way!

[kevinmarrec]

@JamieCurnow Thank you for catching this !

@larrasu I'm gonna have an update regarding the cache, some icon options should definitely rebuild the cache. And I will need to document it as well.

Keeping this open until I implement a better behavior, and sorry for the inconvenience !