how to remove or disable ionic 5 default splash screen ionic version 5 - ionic-framework

Question

How can I replace Ionic 5 default splash screen with a custom HTML or Lottie one?
default spash screen
My package.json is
{
"name": "safenotes",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/common": "~10.0.0",
"#angular/core": "~10.0.0",
"#angular/fire": "^6.1.1",
"#angular/forms": "~10.0.0",
"#angular/platform-browser": "~10.0.0",
"#angular/platform-browser-dynamic": "~10.0.0",
"#angular/router": "~10.0.0",
"#capacitor/android": "^2.4.3",
"#capacitor/core": "2.4.3",
"#ionic-native/core": "^5.0.0",
"#ionic-native/splash-screen": "^5.0.0",
"#ionic-native/status-bar": "^5.0.0",
"#ionic/angular": "^5.0.0",
"#ionic/storage": "^2.3.1",
"firebase": "^8.1.1",
"rxjs": "~6.5.5",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.1000.0",
"#angular/cli": "~10.0.5",
"#angular/compiler": "~10.0.0",
"#angular/compiler-cli": "~10.0.0",
"#angular/language-service": "~10.0.0",
"#capacitor/cli": "2.4.3",
"#ionic/angular-toolkit": "^2.3.0",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.5"
},
"description": "An Ionic project"
}

Answer 1

Unfortunately it looks like only png files are supported at the moment.
You need to use Capacitor Assets (formerly known as cordova-res).
Install it globally:
$ npm install -g cordova-res
Than prepare the following files in the resources folder:
resources/
├── android
| ├── icon-background.png (1)
| └── icon-foreground.png (1)
├── icon.png
└── splash.png
config.xml (2)
Then generate all the required icons and splash screens with:
$ cordova-res
You can also use the --copyoption to automatically copy the files into the android/ios projects, e.g.:
$ cordova-res ios --skip-config --copy
$ cordova-res android --skip-config --copy
(1) These icons are only necessary if you want adaptive icons for android to be generated. They must be present if your android project already uses default adaptive icons from capacitor.
(2) Config file is optional as well, check the docs for updated instructions and many more details.