✨ 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 asout_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 theHead
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.
Top comments (0)