From 4aa57092b9085ff29a409022a3aeff410d54ce86 Mon Sep 17 00:00:00 2001 From: Matt Netkow Date: Mon, 1 Jun 2020 11:46:25 -0500 Subject: [PATCH] basic guide (#2988) Merging before porting to capacitor-site --- site/docs-md/README.md | 1 + .../migrating-from-cordova-to-capacitor.md | 17 +++++++++- site/docs-md/guides/splash-screens-icons.md | 32 +++++++++++++++++++ 3 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 site/docs-md/guides/splash-screens-icons.md diff --git a/site/docs-md/README.md b/site/docs-md/README.md index 28c07135c..ab0980f9a 100644 --- a/site/docs-md/README.md +++ b/site/docs-md/README.md @@ -20,6 +20,7 @@ * [Cordova/Ionic Native Plugins](cordova/using-cordova-plugins.md) * [Known Incompatible Plugins](cordova/known-incompatible-plugins.md) * Guides + * [Splash Screens and Icons](guides/splash-screens-icons.md) * [Ionic Framework Camera App](guides/ionic-framework-app.md) * [Push Notifications - Firebase](guides/push-notifications-firebase.md) * [Deep Links](guides/deep-links.md) diff --git a/site/docs-md/cordova/migrating-from-cordova-to-capacitor.md b/site/docs-md/cordova/migrating-from-cordova-to-capacitor.md index 2634eb14e..360b44c40 100644 --- a/site/docs-md/cordova/migrating-from-cordova-to-capacitor.md +++ b/site/docs-md/cordova/migrating-from-cordova-to-capacitor.md @@ -68,7 +68,22 @@ Both android and ios folders at the root of the project are created. These are e ## Splash Screens and Icons -If you've previously created icon and splash screen images, they can be found in the top-level `resources` folder of your project. [Follow this guide](https://www.joshmorony.com/adding-icons-splash-screens-launch-images-to-capacitor-projects/) to move them over to each native project. +If you've previously created icon and splash screen images, they can be found in the top-level `resources` folder of your project. With those images in place, you can use the `cordova-res` tool to generate icons and splash screens for Capacitor-based iOS and Android projects. + +First, install `cordova-res`: + +```bash +$ npm install -g cordova-res +``` + +Next, run the following to regenerate the images and copy them into the native projects: + +```bash +$ cordova-res ios --skip-config --copy +$ cordova-res android --skip-config --copy +``` + +[Complete details here](https://github.com/ionic-team/cordova-res#capacitor). ## Migrate Plugins diff --git a/site/docs-md/guides/splash-screens-icons.md b/site/docs-md/guides/splash-screens-icons.md new file mode 100644 index 000000000..7817e4b5d --- /dev/null +++ b/site/docs-md/guides/splash-screens-icons.md @@ -0,0 +1,32 @@ +--- +title: Creating Splash Screens and Icons +description: Use cordova-res to generate resource images for native projects +url: /docs/guides/splash-screens-and-icons +contributors: + - dotnetkow +--- + +# Creating Splash Screens and Icons + +Initial support for splash screen and icon generation is now available. For complete details, see the [cordova-res docs](https://github.com/ionic-team/cordova-res). + +First, install `cordova-res`: + +```bash +$ npm install -g cordova-res +``` + +`cordova-res` expects a Cordova-like structure: place one icon and one splash screen file in a top-level `resources` folder within your project, like so: + +``` +resources/ +├── icon.png +└── splash.png +``` + +Next, run the following to generate all images then copy them into the native projects: + +```bash +$ cordova-res ios --skip-config --copy +$ cordova-res android --skip-config --copy +```