How To Generate Icons for a Progressive Web App from SVG File With a Single Command

✨ Watch on YouTube | 🐙 GitHub

Let's generate all the necessary icons for a progressive web app with a single command.

Here, we have an assets folder with two SVG icons, but having one icon is enough. A dark mode option is nice to have, as it only provides a different splash screen for iPhone users with a dark mode preference.

In the folder for static files, we need to have a manifest.json file for our PWA. In NextJS, we would put it in the public folder and omit the icons field because our command will fill it for us.

{
  "short_name": "ReactKit",
  "name": "ReactKit",
  "start_url": ".",
  "display": "fullscreen",
  "theme_color": "#1a1a1a",
  "background_color": "#1a1a1a",
  "description": "A React components system for faster development",
}

Here's our generate_pwa_icons.sh script:

#!/bin/zsh -e

icon=./assets/light-mode-app-icon.svg
bg=#ffffff

out_dir=./public/images/app-icon
manifest=./public/manifest.json
icons_path_base=images/app-icon
index=./pwa_icons_meta.html

npx pwa-asset-generator $icon $out_dir --manifest $manifest --opaque false --icon-only --favicon --type png --path-override $icons_path_base --index $index
npx pwa-asset-generator $icon $out_dir --manifest $manifest --background $bg --icon-only --path-override $icons_path_base --index $index

npx pwa-asset-generator $icon $out_dir --manifest $manifest --background $bg --splash-only --path-override $icons_path_base --index $index

# comment this block if you don't have an icon for a dark mode
dark_mode_icon=./assets/dark-mode-app-icon.svg
dark_mode_bg=#1a1a1a

npx pwa-asset-generator $dark_mode_icon  $out_dir --manifest $manifest --background $dark_mode_bg --splash-only --path-override $icons_path_base --dark-mode --index $index

First, we create a few variables:

• icon - path to our icon
• bg - background color for splash screen and maskable icon
• out_dir - path to the folder where we want to put our icons
• manifest - path to the manifest file
• icons_path_base - path for meta tag links. Here, it is the same as out_dir, but without the ./public prefix
• index - path to the .html file where we want to put meta tags. Since there are no .html files in NextJS, we use a gitignored file that we will use for the command to dump all the links. We can then copy them to a React component and reference it in the Head at the _document.tsx file.

To generate icons, we use pwa-asset-generator. The first command generates a favicon icon with a transparent background, the second one creates all the necessary icons for a progressive web app, and the third one creates images for splash screens. The last command is optional, in case you have an icon for dark mode.