You only need 5 icons to meet most needs!

Related tags

Overview

pwa-icons-generator

You only need 5 icons to meet most needs! Don't believe me? Check out this awesome article written by the author of PostCSS and Autoprefixer.

This tool generates these 5 icons and much more!

Features

Generates icons in a directory of your choosing
input formats: png, jpeg, svg (use svg for better results)
output formats: png, jpeg, svg, ico
input sizes: any (for default icons use a resolution of at least 512x512 or SVG)
output sizes: any
Typescript support

Caveats

pwa-icons-generator does not generate manifest.json and does not inject link tags into index.html. Instead, it generates output object contaning all information your PWA app may need.
When pwa-icons-generator generates SVG icons it does not vectorize input images. Instead, it includes them into an output file as <image xlink:href="${base64}"> tags. So, if your app has strict CSP it may cause some issues.

Installation

npm i -D pwa-icons-generator

Importing everything you may need

import pwaIconsGenerator, { getDefaultIcons } from 'pwa-icons-generator'
import type { PrimaryConfig, SecondaryConfig, Output } from 'pwa-icons-generator'

Usage simple

Example 1

Generates 5 icons and saves them to dist folder

const foregroundImage = `files/fg-square.svg` // local file or URL
const output: Output = await pwaIconsGenerator(foregroundImage)

Example 2

Generates 5 icons (as in the previous example) and applies some options.

  const config: SecondaryConfig = {
    bg: 'black', // color or image to use as background
    padding: '10%',
    outDirectory: 'dist/icons',
    ext: 'jpeg'
    // other options are available
  }

  const output = await pwaIconsGenerator('files/fg-square.svg', config)

Usage advanced

Example 3

If you want to generate custom icons, here's how you do it.

  const myIcons: PrimaryConfig['icons'] = [{
    name: 'my-icon',
    width: 1280,
    height: 720
  }]

  const config: PrimaryConfig = {
    fg: 'files/fg.svg', // foreground image
    bg: '#ffffff00',
    padding: '10px',
    outDirectory: 'dist',
    ext: 'png' as const,
    icons: [...myIcons]
  }

  const output: Output = await pwaIconsGenerator(config)

Example 4 (same result as 3)

  const myIcons: PrimaryConfig['icons'] = [{
    name: 'my-icon',
    width: 1280,
    height: 720,
    fg: 'files/fg-square.svg',
    bg: '#ffffff00',
    padding: '10px',
    outDirectory: 'dist',
    ext: 'png' as const
  }]

  const config: PrimaryConfig = {
    icons: [...myIcons]
  }

  const output: Output = await pwaIconsGenerator(config)

Example 5

If you want to use default icons as well as custom icons, here's how you do it.

Generates 5 default icons and 1 additional

  const defaultIcons = getDefaultIcons()

  const myIcons: PrimaryConfig['icons'] = [{
    name: 'my-icon',
    width: 1280,
    height: 720
  }]

  const config: PrimaryConfig = {
    fg: 'files/fg-square.svg',
    bg: '#ffffff00',
    padding: '10px',
    outDirectory: 'dist',
    ext: 'png' as const,
    icons: [...defaultIcons, ...myIcons]
  }

  const output: Output = await pwaIconsGenerator(config)

Output, manifest and link tags

Example 6

This is an example of how you can separate icons to be used in manifest.json and index.html

  const myIcons: PrimaryConfig['icons']  = [{
    name: 'my-icon',
    width: 1280,
    height: 720,
    linkTag: {
      attributes: { 'my-attribute': 'my-value' }
    }
  }, {
    name: 'my-manifest-icon',
    width: 1000,
    height: 1000,
    outDirectory: 'dist/manifest-icons',
    pathPrefix: '/manifest-icons',
    manifest: true
  }]

  const config: PrimaryConfig = {
    fg: 'files/fg-square.svg',
    icons: [...myIcons]
  }

  const output: Output = await pwaIconsGenerator(config)

/* OUTPUT (some properties omitted)
  {
    linkTags: '<link href="my-icon.png" my-attribute="my-value">',
    manifest: {
      icons: [{
        src: '/manifest-icons/my-manifest-icon.png',
        type: 'image/png',
        sizes: '1000x1000'
      }]
    }
  }
*/

Tips

Use SVG for better results
Options in icons override options in config. In the example below my-icon icon will use files/fg-square.svg as a foreground image while my-icon-2 will use files/fg-rect-vert.svg

  const config: PrimaryConfig = {
    fg: 'files/fg-square.svg',
    icons: [{
      name: 'my-icon',
      width: 1280,
      height: 720
    }, {
      name: 'my-icon-2',
      width: 1000,
      height: 1000,
      fg: 'files/fg-rect-vert.svg'
    }]
  }

Comments

Add syntax highlight to code examples

You can add syntax highlight by adding js in the beginning of code block like here

See an example: https://raw.githubusercontent.com/ai/nanoid/main/README.md

opened by ai 1
Reduce dependencies

Now the tool uses 211 sub-dependency which is too high to recommend the tool

I think many of them can be removed or replaced with smaller alternatives.

opened by ai 0

"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. You will build a simple website that allows for doing that, and you will do it using ES6 and Webpack!

To-do-list Description "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark t

Oct 18, 2022

Twitter Text Libraries. This code is used at Twitter to tokenize and parse text to meet the expectations for what can be used on the platform.

twitter-text This repository is a collection of libraries and conformance tests to standardize parsing of Tweet text. It synchronizes development, tes

Jan 8, 2023

This is the backend of Wherechat, which is a chat application that allows users to find and meet each other through their location on the map.

wherechat-backend About the project This is the backend of Wherechat, which is a chat application that allows users to find and meet each other throug

Nov 23, 2022

Contribute code, meet community members, participate in workshops, and win more SWAG 🚀

Welcome to Hacksquad 2022! Contribute code as a team, meet community members, participate in workshops, and win SWAG With the fantastic atmosphere of

Dec 21, 2022

🌈 GitHub following, followers, only-following, only-follower tracker 🌈

github-following-tracker GitHub following, followers, only-following, only-follower tracker 👀 Just enter your GitHub name and track your followings!

Jun 15, 2022

Flight is a universal package manager for your needs, no matter what language you may want to write your code in.

Flight Swift, reliable, multi-language package manager. ⚡ Installation We don't have an official release of Flight yet, however, if you would like to

Dec 25, 2022

The website which can help you to organize your daily or weekly activities and review them when you need them. you can add, remove and delete an activity

To Do list To do project is webpack project that list activities someone can do at a specific time In this TO-DO list, you can add or remove you activ

Jul 21, 2022