fix: properly configure the single 1024x1024 iOS icon (#560)

ionic-team · Oct 2, 2023 · 2c19107 · 2c19107
1 parent 136470d
commit 2c19107
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 344 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/definitions.ts b/src/definitions.ts
@@ -12,9 +12,6 @@ export interface Assets {
   iosIcon?: InputAsset | null;
   iosSplash?: InputAsset | null;
   iosSplashDark?: InputAsset | null;
-  iosNotificationIcon?: InputAsset | null;
-  iosSettingsIcon?: InputAsset | null;
-  iosSpotlightIcon?: InputAsset | null;
 
   androidIcon?: InputAsset | null;
   androidIconForeground?: InputAsset | null;
@@ -37,8 +34,6 @@ export const enum AssetKind {
   IconForeground = 'icon-foreground',
   IconBackground = 'icon-background',
   NotificationIcon = 'notification-icon',
-  SettingsIcon = 'settings-icon',
-  SpotlightIcon = 'spotlight-icon',
   Splash = 'splash',
   SplashDark = 'splash-dark',
 }
@@ -129,7 +124,6 @@ export interface IosOutputAssetTemplate extends OutputAssetTemplate {
 // https://developer.apple.com/library/archive/documentation/Xcode/Reference/xcode_ref-Asset_Catalog_Format/ImageSetType.html#//apple_ref/doc/uid/TP40015170-CH25-SW2
 export const enum IosIdiom {
   Universal = 'universal',
-  iOSMarketing = 'ios-marketing',
   iPhone = 'iphone',
   iPad = 'ipad',
   Watch = 'watch',

diff --git a/src/platforms/ios/assets.ts b/src/platforms/ios/assets.ts
@@ -4,17 +4,16 @@ import { AssetKind, Format, IosIdiom, Orientation, Platform, Theme } from '../..
 /**
  * 1024px Icon
  *
- * - App Store
+ * - iOS 1024 icon
  */
 export const IOS_1024_ICON: IosOutputAssetTemplate = {
   platform: Platform.Ios,
-  idiom: IosIdiom.iOSMarketing,
+  idiom: IosIdiom.Universal,
   kind: AssetKind.Icon,
   name: '[email protected]',
   format: Format.Png,
   width: 1024,
   height: 1024,
-  scale: 1,
 };
 
 export const IOS_1X_UNIVERSAL_ANYANY_SPLASH: IosOutputAssetTemplateSplash = {

diff --git a/src/platforms/ios/index.ts b/src/platforms/ios/index.ts
@@ -1,4 +1,4 @@
-import { readFile, writeFile } from '@ionic/utils-fs';
+import { readFile, rmSync, writeFile } from '@ionic/utils-fs';
 import { join } from 'path';
 import sharp from 'sharp';
 
@@ -48,15 +48,6 @@ export class IosAssetGenerator extends AssetGenerator {
         return this.generateFromLogo(asset, project);
       case AssetKind.Icon:
         return this.generateIcons(asset, project);
-      case AssetKind.NotificationIcon:
-        return this.generateNotificationIcons(asset, project);
-      // eslint-disable-next-line no-duplicate-case
-      case AssetKind.Icon:
-        return [];
-      case AssetKind.SettingsIcon:
-        return this.generateSettingsIcons(asset, project);
-      case AssetKind.SpotlightIcon:
-        return this.generateSpotlightIcons(asset, project);
       case AssetKind.Splash:
       case AssetKind.SplashDark:
         return this.generateSplashes(asset, project);
@@ -221,39 +212,13 @@ export class IosAssetGenerator extends AssetGenerator {
 
   // Generate ALL the icons when only given a logo
   private async generateIconsForLogo(asset: InputAsset, project: Project): Promise<OutputAsset[]> {
-    const icons = Object.values(IosAssetTemplates).filter((a) =>
-      [AssetKind.Icon, AssetKind.NotificationIcon, AssetKind.SettingsIcon, AssetKind.SpotlightIcon].find(
-        (i) => i === a.kind,
-      ),
-    );
+    const icons = Object.values(IosAssetTemplates).filter((a) => [AssetKind.Icon].find((i) => i === a.kind));
 
     return this._generateIcons(asset, project, icons as IosOutputAssetTemplate[]);
   }
 
   private async generateIcons(asset: InputAsset, project: Project): Promise<OutputAsset[]> {
-    const icons = Object.values(IosAssetTemplates).filter((a) =>
-      [AssetKind.Icon, AssetKind.NotificationIcon, AssetKind.SettingsIcon, AssetKind.SpotlightIcon].find(
-        (i) => i === a.kind,
-      ),
-    );
-
-    return this._generateIcons(asset, project, icons as IosOutputAssetTemplate[]);
-  }
-
-  private async generateNotificationIcons(asset: InputAsset, project: Project): Promise<OutputAsset[]> {
-    const icons = Object.values(IosAssetTemplates).filter((a) => a.kind === AssetKind.NotificationIcon);
-
-    return this._generateIcons(asset, project, icons as IosOutputAssetTemplate[]);
-  }
-
-  private async generateSettingsIcons(asset: InputAsset, project: Project): Promise<OutputAsset[]> {
-    const icons = Object.values(IosAssetTemplates).filter((a) => a.kind === AssetKind.SettingsIcon);
-
-    return this._generateIcons(asset, project, icons as IosOutputAssetTemplate[]);
-  }
-
-  private async generateSpotlightIcons(asset: InputAsset, project: Project): Promise<OutputAsset[]> {
-    const icons = Object.values(IosAssetTemplates).filter((a) => a.kind === AssetKind.SpotlightIcon);
+    const icons = Object.values(IosAssetTemplates).filter((a) => [AssetKind.Icon].find((i) => i === a.kind));
 
     return this._generateIcons(asset, project, icons as IosOutputAssetTemplate[]);
   }
@@ -308,36 +273,29 @@ export class IosAssetGenerator extends AssetGenerator {
   }
 
   private async updateIconsContentsJson(generated: OutputAsset[], project: Project) {
-    const contentsJsonPath = join(project.config.ios!.path!, IOS_APP_ICON_SET_PATH, 'Contents.json');
+    const assetsPath = join(project.config.ios!.path!, IOS_APP_ICON_SET_PATH);
+    const contentsJsonPath = join(assetsPath, 'Contents.json');
     const json = await readFile(contentsJsonPath, { encoding: 'utf-8' });
 
     const parsed = JSON.parse(json);
 
-    const withoutMissing = parsed.images.filter((i: any) => !!i.filename);
-
+    const withoutMissing = [];
     for (const g of generated) {
-      const width = g.template.width / (g.template.scale ?? 1);
-      const height = g.template.height / (g.template.scale ?? 1);
-      const scale = g.template.scale ?? 1;
+      const width = g.template.width;
+      const height = g.template.height;
 
-      const existing = withoutMissing.find(
-        (f: any) =>
-          f.scale === `${scale}x` &&
-          f.size === `${width}x${height}` &&
-          f.idiom === (g.template as IosOutputAssetTemplate).idiom &&
-          typeof f.appearances === 'undefined',
-      );
+      parsed.images.map((i: any) => {
+        if (i.filename !== (g.template as IosOutputAssetTemplate).name) {
+          rmSync(join(assetsPath, i.filename));
+        }
+      });
 
-      if (existing) {
-        existing.filename = (g.template as IosOutputAssetTemplate).name;
-      } else {
-        withoutMissing.push({
-          idiom: (g.template as IosOutputAssetTemplate).idiom,
-          size: `${width}x${height}`,
-          scale: `${scale}x`,
-          filename: (g.template as IosOutputAssetTemplate).name,
-        });
-      }
+      withoutMissing.push({
+        idiom: (g.template as IosOutputAssetTemplate).idiom,
+        size: `${width}x${height}`,
+        filename: (g.template as IosOutputAssetTemplate).name,
+        platform: Platform.Ios,
+      });
     }
 
     parsed.images = withoutMissing;

diff --git a/src/project.ts b/src/project.ts
@@ -62,9 +62,6 @@ export class Project extends MobileProject {
       iosIcon: await this.loadInputAsset('ios/icon', AssetKind.Icon, Platform.Ios),
       iosSplash: await this.loadInputAsset('ios/splash', AssetKind.Splash, Platform.Ios),
       iosSplashDark: await this.loadInputAsset('ios/splash-dark', AssetKind.SplashDark, Platform.Ios),
-      iosNotificationIcon: await this.loadInputAsset('ios/notification-icon', AssetKind.NotificationIcon, Platform.Ios),
-      iosSettingsIcon: await this.loadInputAsset('ios/settings-icon', AssetKind.SettingsIcon, Platform.Ios),
-      iosSpotlightIcon: await this.loadInputAsset('ios/spotlight-icon', AssetKind.SpotlightIcon, Platform.Ios),
 
       androidIcon: await this.loadInputAsset('android/icon', AssetKind.Icon, Platform.Android),
       androidIconForeground: await this.loadInputAsset('android/icon-foreground', AssetKind.Icon, Platform.Android),

diff --git a/test/asset.test.ts b/test/asset.test.ts
@@ -40,17 +40,5 @@ describe('Asset test', () => {
     expect(assets.iosIcon?.format()).toBe(Format.Png);
     expect(assets.iosIcon?.width).toBe(1024);
     expect(assets.iosIcon?.height).toBe(1024);
-    expect(assets.iosNotificationIcon).not.toBeNull();
-    expect(assets.iosNotificationIcon?.format()).toBe(Format.Png);
-    expect(assets.iosNotificationIcon?.width).toBe(1024);
-    expect(assets.iosNotificationIcon?.height).toBe(1024);
-    expect(assets.iosSettingsIcon).not.toBeNull();
-    expect(assets.iosSettingsIcon?.format()).toBe(Format.Png);
-    expect(assets.iosSettingsIcon?.width).toBe(1024);
-    expect(assets.iosSettingsIcon?.height).toBe(1024);
-    expect(assets.iosSpotlightIcon).not.toBeNull();
-    expect(assets.iosSpotlightIcon?.format()).toBe(Format.Png);
-    expect(assets.iosSpotlightIcon?.width).toBe(1024);
-    expect(assets.iosSpotlightIcon?.height).toBe(1024);
   });
 });
diff --git a/test/fixtures/app-logo-only/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json b/test/fixtures/app-logo-only/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json
@@ -1,112 +1,10 @@
 {
   "images": [
     {
-      "size": "20x20",
-      "idiom": "iphone",
-      "filename": "[email protected]",
-      "scale": "2x"
-    },
-    {
-      "size": "20x20",
-      "idiom": "iphone",
-      "filename": "[email protected]",
-      "scale": "3x"
-    },
-    {
-      "size": "29x29",
-      "idiom": "iphone",
-      "filename": "[email protected]",
-      "scale": "2x"
-    },
-    {
-      "size": "29x29",
-      "idiom": "iphone",
-      "filename": "[email protected]",
-      "scale": "3x"
-    },
-    {
-      "size": "40x40",
-      "idiom": "iphone",
-      "filename": "[email protected]",
-      "scale": "2x"
-    },
-    {
-      "size": "40x40",
-      "idiom": "iphone",
-      "filename": "[email protected]",
-      "scale": "3x"
-    },
-    {
-      "size": "60x60",
-      "idiom": "iphone",
-      "filename": "[email protected]",
-      "scale": "2x"
-    },
-    {
-      "size": "60x60",
-      "idiom": "iphone",
-      "filename": "[email protected]",
-      "scale": "3x"
-    },
-    {
-      "size": "20x20",
-      "idiom": "ipad",
-      "filename": "[email protected]",
-      "scale": "1x"
-    },
-    {
-      "size": "20x20",
-      "idiom": "ipad",
-      "filename": "[email protected]",
-      "scale": "2x"
-    },
-    {
-      "size": "29x29",
-      "idiom": "ipad",
-      "filename": "[email protected]",
-      "scale": "1x"
-    },
-    {
-      "size": "29x29",
-      "idiom": "ipad",
-      "filename": "[email protected]",
-      "scale": "2x"
-    },
-    {
-      "size": "40x40",
-      "idiom": "ipad",
-      "filename": "[email protected]",
-      "scale": "1x"
-    },
-    {
-      "size": "40x40",
-      "idiom": "ipad",
-      "filename": "[email protected]",
-      "scale": "2x"
-    },
-    {
-      "size": "76x76",
-      "idiom": "ipad",
-      "filename": "[email protected]",
-      "scale": "1x"
-    },
-    {
-      "size": "76x76",
-      "idiom": "ipad",
-      "filename": "[email protected]",
-      "scale": "2x"
-    },
-    {
-      "size": "83.5x83.5",
-      "idiom": "ipad",
-      "filename": "[email protected]",
-      "scale": "2x"
-    },
-    {
-      "size": "1024x1024",
-      "idiom": "ios-marketing",
       "filename": "[email protected]",
-      "scale": "1x"
+      "idiom": "universal",
+      "platform": "ios",
+      "size": "1024x1024"
     }
   ],
   "info": {