elk-zone · userquin · Jul 4, 2024 · Jul 4, 2024 · Jul 4, 2024 · Jul 5, 2024
diff --git a/modules/pwa/i18n.ts b/modules/pwa/i18n.ts
@@ -83,11 +83,23 @@ export async function createI18n(): Promise<LocalizedWebManifest> {
         sizes: '64x64',
         type: 'image/png',
       },
+      {
+        src: 'monochrome-64x64.png',
+        sizes: '64x64',
+        type: 'image/png',
+        purpose: 'monochrome',
+      },
       {
         src: 'pwa-192x192.png',
         sizes: '192x192',
         type: 'image/png',
       },
+      {
+        src: 'monochrome-192x192.png',
+        sizes: '192x192',
+        type: 'image/png',
+        purpose: 'monochrome',
+      },
       {
         src: 'pwa-512x512.png',
         sizes: '512x512',
@@ -100,6 +112,12 @@ export async function createI18n(): Promise<LocalizedWebManifest> {
         type: 'image/png',
         purpose: 'maskable',
       },
+      {
+        src: 'monochrome-512x512.png',
+        sizes: '512x512',
+        type: 'image/png',
+        purpose: 'monochrome',
+      },
     ],
     share_target: {
       action: '/web-share-target',

diff --git a/package.json b/package.json
@@ -134,7 +134,7 @@
     "lint-staged": "^15.2.2",
     "nuxt": "^3.11.2",
     "prettier": "^3.2.5",
-    "sharp": "^0.33.3",
+    "sharp": "0.32.6",
     "sharp-ico": "^0.1.5",
     "simple-git-hooks": "^2.11.1",
     "tsx": "^4.7.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public-dev/apple-touch-icon.png b/public-dev/apple-touch-icon.png
diff --git a/public-dev/maskable-icon.png b/public-dev/maskable-icon.png
diff --git a/public-dev/pwa-192x192.png b/public-dev/pwa-192x192.png
diff --git a/public-dev/pwa-512x512.png b/public-dev/pwa-512x512.png
diff --git a/public-dev/pwa-64x64.png b/public-dev/pwa-64x64.png
diff --git a/public-staging/apple-touch-icon.png b/public-staging/apple-touch-icon.png
diff --git a/public-staging/maskable-icon.png b/public-staging/maskable-icon.png
diff --git a/public-staging/pwa-192x192.png b/public-staging/pwa-192x192.png
diff --git a/public-staging/pwa-512x512.png b/public-staging/pwa-512x512.png
diff --git a/public-staging/pwa-64x64.png b/public-staging/pwa-64x64.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/maskable-icon.png b/public/maskable-icon.png
diff --git a/public/monochrome-192x192.png b/public/monochrome-192x192.png
diff --git a/public/monochrome-512x512.png b/public/monochrome-512x512.png
diff --git a/public/monochrome-64x64.png b/public/monochrome-64x64.png
diff --git a/public/monochrome-logo.svg b/public/monochrome-logo.svg
diff --git a/public/pwa-192x192.png b/public/pwa-192x192.png
diff --git a/public/pwa-512x512.png b/public/pwa-512x512.png
diff --git a/public/pwa-64x64.png b/public/pwa-64x64.png
diff --git a/scripts/generate-pwa-icons.ts b/scripts/generate-pwa-icons.ts
@@ -90,6 +90,7 @@ async function generateTransparentIcons(icons: ResolvedIcons, svgLogo: string, f
   const { sizes, padding, resizeOptions } = icons.transparent
   await Promise.all(sizes.map(async (size) => {
     const filePath = resolve(folder, icons.iconName('transparent', size))
+    console.log(filePath)
     await sharp({
       create: {
         width: size,
@@ -189,6 +190,26 @@ async function generatePWAIcons(folders: string[], icons: Icons) {
     apple,
     ico,
   })))
+
+  const svgLogo = resolve(folders[0], 'monochrome-logo.svg')
+
+  await generateTransparentIcons({
+    png: { compressionLevel: 9, quality: 60 },
+    iconName: (type, size) => {
+      switch (type) {
+        case 'transparent':
+          return `monochrome-${size}x${size}-temp.png`
+        case 'maskable':
+          return `maskable-icon-${size}x${size}.png`
+        case 'apple':
+          return `apple-touch-icon-${size}x${size}.png`
+      }
+    },
+    transparent,
+    maskable,
+    apple,
+    ico,
+  }, svgLogo, folders[0])
 }
 
 console.log('Generating Elk PWA Icons...')