eleventy-plugin-pwa-icons 🎨

Generates icons and splash screen images, favicons and mstile images. Updates manifest.json and every HTML file with the generated images according to Web App Manifest specs and Apple Human Interface guidelines.

Intention

Every PWA needs icons either it is aimed for a mobile or a desktop application 💁‍♂️

Get started

This plugin uses pwa-assets-generator under the hood, so, we recommend to read about it first 🥸.

Installation

At first run:

npm i -D eleventy-plugin-pwa-icons

and eventually add to Eleventy as plugin:

const { icons } = require('eleventy-plugin-pwa-icons');

module.exports = (eleventyConfig) => {
	eleventyConfig.addPlugin(icons, {
		/* Optional options. */
	});
};

Options

The plugin can accept following options:

interface PWAIconsOptions {
	icons?: {
		/**
		 * Path to source image for PWA icons.
		 * By default, it is `src/icon.png`.
		 *
		 * Should be relative to _current working directory_.
		 */
		pathToRawImage?: string;
		/**
		 * Public directory into which to output all PWA icons.
		 *
		 * Should be relative to _output_ directory.
		 */
		publicDirectory?: string;
	};
	manifest?: {
		/**
		 * Path to `manifest.json` file.
		 * By default, it is `src/manifest.json`.
		 *
		 * Should be relative to _current working directory_.
		 */
		pathToManifest?: string;
		/**
		 * Public directory into which to output updated `manifest.json`.
		 *
		 * Should be relative to _output_ directory.
		 */
		publicDirectory?: string;
	};
	/**
	 * Controls whether plugin should work or not.
	 * By default, it is enabled in _production_ mode.
	 */
	enabled?: boolean;
	/** Logs a result of generated items to whatever you want. */
	logger?: LoggerFunction;
	/**
	 * Options that control work of [pwa-asset-generator](https://www.npmjs.com/package/pwa-asset-generator).
	 *
	 * See [here](https://github.com/onderceylan/pwa-asset-generator) about available options.
	 */
	generatorOptions?: Options;
}

By default output directory for icons is your_build_directory/icons/.

Default path for manifest output - your_build_directory/manifest.json.

Caching

The plugin caches generated icons to reduce CPU loading. The name of a cache folder is .icons. It should be committed to a Git/SVN to avoid unnecessary icons generation.

That is all 👐 The plugin will do a remaining dirty job by itself.

Word from author

Have fun! ✌️