ionic react customize icon, splash screen

press app abc with customized icon

customized splash screen opens

press show splash, splash screen will display for 2 secs

-> create 1024 x 1024 icon image, 4096 x 4096 splash image

android studio -> right click app/res -> new -> image asset

select icon image -> resize -> change color on background layer

icons are customized

->generate android splash screen with tools on https://apetools.webprofusion.com/#/tools/imagegorilla

replace drawable in project/android/app/src/main/res

splash screen is customized

//tab2.tsx

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonDatetime, IonFooter,
  IonList, IonItemDivider, IonTextarea, IonAvatar,
  IonText, IonThumbnail, IonSelectOption, IonInput,
  IonSelect, IonCheckbox, IonToggle, IonRange,
  IonNote, IonRadio, IonItemSliding, IonItemOption,
  IonItemOptions, IonListHeader, IonChip, IonImg,
  IonLoading, IonProgressBar, IonSkeletonText,
  IonReorder, IonReorderGroup, IonSlide, IonSlides,
  IonTabBar, IonTabs, IonTabButton, IonBadge,
  IonRouterOutlet
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab2.css';
import {
  calendar, personCircle, map,
  informationCircle
} from 'ionicons/icons';
import { Plugins } from '@capacitor/core';

const Tab2: React.FC = () => {
  const { SplashScreen } = Plugins;

  const showSplash = () => {
    SplashScreen.show({
      showDuration: 2000,
      autoHide: true
    });
  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Splash Screen Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonItem >
            <IonButton onClick={() => showSplash()}>Show Splash</IonButton>
          </IonItem>
        </IonList>
      </IonContent>
    </IonPage >
  )
}

export default Tab2;

reference:
https://capacitor.ionicframework.com/docs/apis/splash-screen#hiding-the-splash-screen

customization
https://enappd.com/blog/icon-splash-in-ionic-react-capacitor-apps/114/