Icons & Splashscreens

The corber make-icons and corber make-splashes commands generate all required icons and splashes for your added platforms from a single SVG. This is powered by a separate library called splicon.

By default, Corber detects which platforms (e.g. ios) you have installed and only generates assets for those platforms. Platform & icon source are configurable as documented in the cli.

Icon Generation

Place an icon.svg file at corber/icon.svg and run corber make-icons. By default, icons for added platforms will be resized and injected.

To specify a platform, use the --platform option:

corber make-icons --platform ios

The source SVG should be a square of any size.

Splash Generation

Place a splash.svg file at corber/splash.svg and run corber make-splashes. By default, splashes for added platforms will be resized and injected.

o specify a platform, use the --platform option:

corber make-splashes --platform ios

Unlike icons, the variance of splash file is larger. You likely want to download the following splash SVG template. The source SVG should have a background filling the entire area, and icons / text should be kept to the ‘safe area’ box.

Splash Screen Best Practices

1: Configure your config.xml to set AutoHideSplashScreen to false. This means that once booted, Cordova will not automatically hide your splash screen.

Placed in corber/cordova/config.xml

<widget>
  ...
  <preference name="AutoHideSplashScreen" value="false"/>
</widget>

2: Manually hide the splash screen after your JavaScript App has booted. Ember users can leverage the corber-splash service to hide the splashscreen in the afterModel hook.

// app/routes/application.js
import Ember from 'ember';

const {
  Route,
  inject: { service }
} = Ember;

export default Route.extend({
  splashScreenService: service('ember-cordova/splash'),

  afterModel() {
    this.get('splashScreenService').hide();
  }
  // ...
});