gulp-mobile-splashscreens
Gulp plugin that creates PNG splashscreens for iOS and Android based on a SVG image
Please read this blog post for a detailed explanation of the problem that the plugin solves.
Usage
To use the the plugin in your gulp process:
const gulp = ;const mobileSplashscreens = ; gulp;
This will create all splashscreens in the folder images/
.
Cordova / PhoneGap
Add the following to your config.xml
to use the icons in a Cordova/PhoneGap application:
<!-- Splashscreens -->
FAQ
Q: Why does iOS add a black background behind my splashscreen?
If you use a SVG with a transparent background, the gulp-mobile-splashscreens
will create splashscreens with transparent background. iOS always adds a black
background to those transparent splashscreens.
You need to add to your SVG a background if you want to have another color. It's important that the background area stretches beyond the image itself because gulp-mobile-splashscreens
will otherwise add transparent areas around
the image to fill the target size of each splashscreen.
For example, this adds a red background to your splashscreens:
<!-- Your image -->
Credits
Sample icon made by Freepik from www.flaticon.com is licensed by Creative Commons BY 3.0