DEV Community

Cover image for How To Generate Icons for a Progressive Web App from SVG File With a Single Command
Radzion Chachura
Radzion Chachura

Posted on • Originally published at radzion.com

2

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",
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay