Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/halo-lab/eleventy-plugin-pwa-icons
Plugin for generating icon and splash screen images, favicons, and mstile images. Updates manifest.json and every HTML page.
https://github.com/halo-lab/eleventy-plugin-pwa-icons
eleventy favicons generator icons mstile pwa
Last synced: about 2 months ago
JSON representation
Plugin for generating icon and splash screen images, favicons, and mstile images. Updates manifest.json and every HTML page.
- Host: GitHub
- URL: https://github.com/halo-lab/eleventy-plugin-pwa-icons
- Owner: Halo-Lab
- License: isc
- Archived: true
- Created: 2021-04-04T15:58:44.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-01-18T07:37:06.000Z (almost 3 years ago)
- Last Synced: 2024-09-25T20:41:19.212Z (about 2 months ago)
- Topics: eleventy, favicons, generator, icons, mstile, pwa
- Language: TypeScript
- Homepage:
- Size: 229 KB
- Stars: 7
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# eleventy-plugin-pwa-icons 🎨
**⚠️ This code moves to [the new location](https://github.com/Halo-Lab/eleventy-packages). Please, refer there to get a new development status.**
[](https://github.com/prettier/prettier)
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](https://www.w3.org/TR/appmanifest/) and [Apple Human Interface guidelines](https://developer.apple.com/design/human-interface-guidelines/).
## Intention
Every [PWA](https://en.wikipedia.org/wiki/Progressive_web_application) needs icons either it is aimed for a mobile or a desktop application 💁♂️
## Get started
> This plugin uses [`pwa-assets-generator`](https://github.com/onderceylan/pwa-asset-generator) under the hood, so, we recommend to read about it first 🥸.
### Installation
At first run:
```sh
npm i -D eleventy-plugin-pwa-icons
```
and eventually add to Eleventy as plugin:
```js
const { icons } = require('eleventy-plugin-pwa-icons');
module.exports = (eleventyConfig) => {
eleventyConfig.addPlugin(icons, {
/* Optional options. */
});
};
```
### Options
The plugin can accept following options:
```ts
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_.
That is all 👐 The plugin will do a remaining dirty job by itself.
## Word from author
Have fun! ✌️
