Icon Genie Profile Files

If you need to automate the creation of all your app’s icons and splashscreens, Icon Genie offers configuration files which can be run in batch.

These configuration files are called “profile files”. The files are in JSON format and tell Icon Genie which images to generate and how to generate them. They also spare you from having to remember the whole set of Icon Genie commands and parameters to generate your assets.

File structure

The generic form of a JSON profile file is:

{
  "params": { },
  "assets": [ ]
}

We will be discussing each in the next sections.

Params

The params object from a JSON profile file takes the same prop names as the generate command parameters (but camelCased instead of the CLI’s kebab-case). There is one key difference: instead of using mode (examples: “spa,pwa”, “all”) you will be writing include (examples: [ “spa”, “pwa” ], [ “all” ]).

Full list of props that you can write for the params object:

Prop nameTypeDescriptionExamples
includeArrayInclude Icon Genie hardcoded sets of assets for specific Quasar modes[ "spa", "pwa" ] / [ "all" ]
iconStringPath to source file for icon; can be absolute or relative to the root of the Quasar project foldermy-icon.png
backgroundStringPath to optional background source file (for splashscreens); can be absolute or relative to the root of the Quasar project foldermy-bg.png
filterStringOptionally filter the assets by generators; when used, it can generate only one type of asset instead of allico
qualityNumber [1-12]Quality of the generated files; higher quality means bigger filesize, slower; lower quality means smaller filesize, faster12
paddingArray [Number](v2.1+) Apply fixed padding to the icon image after trimming it; Syntax: [ <horiz_px>, <vert_px> ]; Default is: [0, 0][10, 0] / [5,5]
skipTrimBoolean(v2.2+) Do not trim the icon source file
themeColorString [hex]Rather than using the other color related props, you can use this one; it will be used by each generator (that uses a color)ccc / e2b399
themeColorString [hex]Theme color to use for all generators requiring a color; it gets overriden if any generator color is also specifiedccc / e2b399
pngColorString [hex]Background color to use for the png generator, when “background: true” in the asset definition (like for the cordova/capacitor iOS icons)ccc / e2b399
splashscreenColorString [hex]Background color to use for the splashscreen generatorccc / e2b399
svgColorString [hex]Color to use for the generated monochrome SVGsccc / e2b399
splashscreenIconRatioNumber [0-100]Ratio of icon size in respect to the width or height (whichever is smaller) of the resulting splashscreen; represents percentages; 0 means it won’t add the icon of top of the background40

Assets

The assets array can contain custom definitions for extra assets, should you need them. This can be used when Icon Genie’s default list for each mode is not sufficient for your use case. If you don’t specify the include prop in params you can only generate your custom assets.

In 99% of the cases you won’t need to specify the assets array, but Icon Genie is designed to be very flexible, so it includes this feature too.

Some examples for assets from which you can extract the syntax for every type of possible asset that Icon Genie can generate:

"assets": [
  {
    "generator": "png",
    "name": "icon-{size}x{size}.png",
    "folder": "src-bex/icons",
    "sizes": [ 16, 48, 128 ]
  },

  {
    "generator": "svg",
    "name": "safari-pinned-tab.svg",
    "folder": "src/statics/icons"
  },

  {
    "generator": "splashscreen",
    "name": "apple-launch-{size}.png",
    "folder": "src/statics/icons",
    "sizes": [
      [ 1668, 2388 ]
    ],
    "tag": "<link rel=\"apple-touch-startup-image\" media=\"(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)\" href=\"statics/icons/{name}\">"
  },

  {
    "generator": "icns",
    "name": "icon.icns",
    "folder": "src-electron/icons"
  },

  {
    "generator": "ico",
    "name": "icon.ico",
    "folder": "src-electron/icons"
  },

  {
    "generator": "splashscreen",
    "name": "Default-Landscape-2436h.png",
    "folder": "src-cordova/res/screen/ios",
    "sizes": [
      [ 2436, 1125 ]
    ]
  },

  {
    "generator": "png",
    "name": "icon-29@2x.png",
    "folder": "src-cordova/res/ios",
    "sizes": [ 58 ],
    "platform": "cordova-ios",
    "background": true
  },

  {
    "generator": "png",
    "name": "icon-29@2x.png",
    "folder": "src-cordova/res/ios",
    "sizes": [ 58 ],
    "platform": "cordova-ios",
    "background": true
  },

  {
    "generator": "png",
    "name": "xxxhdpi.png",
    "folder": "src-cordova/res/android",
    "sizes": [ 192 ],
    "platform": "cordova-android",
    "density": "xxxhdpi"
  },

  {
    "generator": "splashscreen",
    "name": "Default@2x~ipad~comany.png",
    "folder": "src-cordova/res/screen/ios",
    "sizes": [
      [ 1278, 2732 ]
    ],
    "platform": "cordova-ios"
  },

  {
    "generator": "splashscreen",
    "name": "splash-land-xxxhdpi.png",
    "folder": "src-cordova/res/screen/android",
    "sizes": [
      [ 1920, 1280 ]
    ],
    "platform": "cordova-android",
    "density": "land-xxxhdpi"
  }
]

Bootstrap profiles

Icon Genie also offers the profile command which can bootstrap JSON profile files for you. It can help you create one or more such files that you can then run in batch through the generate command with --profile param (or short -p).

The most handy use case is to generate multiple profile files into one specific folder, each with their own parameters, and then run all of them through $ icongenie generate -p /path/to/folder.