favgen 0.0.1

package/README.md

@@ -0,0 +1,34 @@
+![npm](https://img.shields.io/npm/v/favgen?style=flat-square)
+
+This is a simple CLI tool to generate an optimized set of favicons from a single input file. Icons are optimized in terms of both size and quantity (nowadays you don't that many of them). They are produced according to [this article](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs) which served as an inspiration for the tool.
+
+You can provide a file with any extension that [sharp library](https://sharp.pixelplumbing.com/) accepts.
+
+By default, the following set of favicons is produced:
+- `favicon.svg` if input file was SVG and `favicon.png` 32x32 otherwise
+- `favicon.ico` 32x32
+- `favicon-192.png` 192x192 (for Android devices)
+- `favicon-512.png` 192x192 (for Android devices)
+- `apple-touch-icon.png` 180x180 (original image is resized to 140x140 and 20px padding transparent padding is added on each side; rationale is given in the article)
+
+Additionally, a sample `manifest.webmanifest` file is produced which shows how favicons for Android devices are supposed to be included.
+
+Besides that, PNG output is optimized by `sharp` (which uses `pngquant`) and SVG output is optimized by [SVGO](https://github.com/svg/svgo).
+Also, color palette is reduced to 64 colors by default in order to reduce assets’ size.
+
+You can tweak the following settings by providing additional commands:
+- output directory by setting `-o` option (`__favicon__` by default)
+- icon prefix (`favicon` by default)
+- colors palette size by providing `--colors` followed by a number between 2 and 256
+- producing 16x16 .ico file by providing `--include16` flag
+
+The tool can also be used as an API:
+```js
+const { produceIcons } = require("favgen")
+const inputFilePath = "favicon.svg"
+const outputDirPath = "__favicons__"
+const prefix = "blueberry"
+const paletteSize = 64
+const include16 = true
+produceIcons(inputFilePath, outputDirPath, prefix, paletteSize, include16)
+```

package/bin/index.js

@@ -0,0 +1,40 @@
+#!/usr/bin/env node
+
+const path = require("path");
+const { Command, InvalidArgumentError } = require("commander");
+const PKG = require("../package.json");
+const { produceIcons } = require("../lib");
+
+const CWD = process.cwd();
+
+const program = new Command();
+
+program.name(PKG.name).description(PKG.description).version(PKG.version);
+
+program
+  .description("Produce a set of favicons from a single input file.")
+  .argument("<inputPath>", "Input icon path")
+  .option("-o, --output <path>", "Output directory path", "__favicons__")
+  .option("--prefix <name>", "Icon prefix", "favicon")
+  .option("--colors <number>", "Color paleete size, between 2 and 256", 64)
+  .option("--include16", "Produce 16x16 .ico file", false)
+  .action((filepath, { output: outputDir, prefix, colors, include16 }) => {
+    const colorsPaletteSize = parseInt(colors, 10);
+    const isValidPaletteSize =
+      Number.isNaN(colorsPaletteSize) ||
+      colorsPaletteSize < 2 ||
+      colorsPaletteSize > 256;
+    if (isValidPaletteSize) {
+      throw new InvalidArgumentError(
+        "Color palette size must be a number between 2 and 256.",
+      );
+    }
+
+    const inputPath = path.join(CWD, filepath);
+    const outputPath = path.isAbsolute(outputDir)
+      ? outputDir
+      : path.join(CWD, outputDir);
+    produceIcons(inputPath, outputPath, prefix, colorsPaletteSize, include16);
+  });
+
+program.parse();

package/lib/generator.d.ts

@@ -0,0 +1,2 @@
+declare function produceIcons(inputFilePath: string, outputDirPath: string, prefix?: string, paletteSize?: number, include16?: boolean): Promise<void>;
+export default produceIcons;

package/lib/generator.js

@@ -0,0 +1,140 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const promises_1 = __importDefault(require("fs/promises"));
+const path_1 = __importDefault(require("path"));
+const sharp_1 = __importDefault(require("sharp"));
+const to_ico_1 = __importDefault(require("to-ico"));
+const svgo_1 = require("svgo");
+const is_svg_1 = __importDefault(require("is-svg"));
+const baseIconConfigs = [
+    {
+        name: "favicon.svg",
+    },
+    {
+        // no colors palette size otherwise its color profile is off
+        // which causes problems with converting to ico
+        name: "favicon.ico",
+        pxSize: 32,
+    },
+    {
+        name: "favicon-192.png",
+        pxSize: 192,
+        colorsPaletteSize: 64,
+    },
+    {
+        name: "favicon-512.png",
+        pxSize: 512,
+        colorsPaletteSize: 64,
+    },
+    {
+        name: "apple-touch-icon.png",
+        pxSize: 180,
+        colorsPaletteSize: 64,
+        padding: 20,
+    },
+];
+function buildPng(rawBuffer, { pxSize, colorsPaletteSize, padding }) {
+    const outputIcon = (0, sharp_1.default)(rawBuffer)
+        .resize(pxSize, pxSize)
+        .png({ compressionLevel: 9, colors: colorsPaletteSize });
+    return padding
+        ? outputIcon.extend({
+            top: padding,
+            left: padding,
+            bottom: padding,
+            right: padding,
+            background: { r: 0, g: 0, b: 0, alpha: 0 },
+        })
+        : outputIcon;
+}
+function getPngBuffer(rawBuffer, cfg) {
+    return buildPng(rawBuffer, cfg).toBuffer();
+}
+function getIcoBuffer(rawBuffer, cfg) {
+    return buildPng(rawBuffer, cfg)
+        .toBuffer()
+        .then((buf) => (0, to_ico_1.default)(buf));
+}
+function getSvgBuffer(rawBuffer) {
+    const optimizedSvg = (0, svgo_1.optimize)(rawBuffer, {
+        multipass: true,
+    });
+    if (optimizedSvg.error !== undefined) {
+        throw Error(optimizedSvg.error);
+    }
+    return Buffer.from(optimizedSvg.data);
+}
+function getIconBuffer(rawBuffer, cfg) {
+    const iconName = cfg.name;
+    const iconExtension = path_1.default.extname(iconName);
+    switch (iconExtension) {
+        case ".svg":
+            return getSvgBuffer(rawBuffer);
+        case ".png":
+            return getPngBuffer(rawBuffer, cfg);
+        case ".ico":
+            return getIcoBuffer(rawBuffer, cfg);
+        default:
+            throw Error(`Extension ${iconExtension} is not recognized.`);
+    }
+}
+async function produceIcons(inputFilePath, outputDirPath, prefix = "favicon", paletteSize = 64, include16 = false) {
+    await promises_1.default.access(inputFilePath);
+    try {
+        await promises_1.default.access(outputDirPath);
+    }
+    catch (e) {
+        if (e instanceof Error && e.message.includes("ENOENT")) {
+            promises_1.default.mkdir(outputDirPath);
+        }
+        else {
+            throw e;
+        }
+    }
+    const rawIconBuf = await promises_1.default.readFile(inputFilePath);
+    const isSvgBuf = (0, is_svg_1.default)(rawIconBuf);
+    let iconConfigs = baseIconConfigs.map((cfg) => {
+        const mappedCfg = { ...cfg };
+        if (!isSvgBuf && mappedCfg.name.endsWith(".svg")) {
+            mappedCfg.name = mappedCfg.name.replace(".svg", ".png");
+            mappedCfg.pxSize = 32;
+        }
+        mappedCfg.name = mappedCfg.name.replace("favicon", prefix);
+        if (mappedCfg.name.endsWith(".png")) {
+            mappedCfg.colorsPaletteSize = paletteSize;
+        }
+        return mappedCfg;
+    });
+    if (include16) {
+        const ico = iconConfigs.find((cfg) => cfg.name.endsWith(".ico"));
+        const icoNameWithoutExt = ico.name.slice(0, -4);
+        iconConfigs.push({ ...ico, name: `${icoNameWithoutExt}-32.ico` });
+        iconConfigs.push({
+            ...ico,
+            name: `${icoNameWithoutExt}-16.ico`,
+            pxSize: 16,
+        });
+        iconConfigs = iconConfigs.filter((cfg) => cfg !== ico);
+    }
+    const iconsGenerationSeries = iconConfigs.map(async (cfg) => {
+        const iconName = cfg.name.replace("favicon", prefix);
+        const iconCfg = cfg.name.endsWith("png")
+            ? { ...cfg, colorsPaletteSize: paletteSize, name: iconName }
+            : { ...cfg, name: iconName };
+        const outputBuffer = await getIconBuffer(rawIconBuf, iconCfg);
+        return promises_1.default.writeFile(path_1.default.join(outputDirPath, iconCfg.name), outputBuffer);
+    });
+    await Promise.all(iconsGenerationSeries);
+    const manifestFile = {
+        icons: [
+            { src: `/${prefix}-192.png`, type: "image/png", sizes: "192x192" },
+            { src: `/${prefix}-512.png`, type: "image/png", sizes: "512x512" },
+        ],
+    };
+    const manifestText = JSON.stringify(manifestFile, null, 2);
+    promises_1.default.writeFile(path_1.default.join(outputDirPath, "manifest.webmanifest"), manifestText);
+}
+exports.default = produceIcons;

package/lib/index.d.ts

@@ -0,0 +1 @@
+export { default as produceIcons } from "./generator";

package/lib/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.produceIcons = void 0;
+// eslint-disable-next-line import/prefer-default-export
+var generator_1 = require("./generator");
+Object.defineProperty(exports, "produceIcons", { enumerable: true, get: function () { return __importDefault(generator_1).default; } });

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "favgen",
+  "version": "0.0.1",
+  "description": "CLI tool to generate a set of favicons from a single input file.",
+  "keywords": [
+    "favicon"
+  ],
+  "author": "islambeg",
+  "license": "Unlicense",
+  "homepage": "https://github.com/favgen/favgen-cli",
+  "repository": "https://github.com/favgen/favgen-cli.git",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "bin": "bin/index.js",
+  "files": [
+    "lib/",
+    "bin/"
+  ],
+  "engines": {
+    "node": ">= 16"
+  },
+  "scripts": {
+    "build": "tsc --project tsconfig.json",
+    "build:dev": "tsc --watch --project tsconfig.json",
+    "prepublishOnly": "npm run build",
+    "preinstall": "husky install && husky add .husky/pre-commit 'npx lint-staged' && git add .husky/pre-commit",
+    "postinstall": "npm run build",
+    "lint": "eslint --ext .js,.cjs,.mjs,.ts,.cts,.mts --fix --ignore-path .gitignore --cache",
+    "prettify": "prettier --write --ignore-path .gitignore --plugin-search-dir=."
+  },
+  "dependencies": {
+    "commander": "^9.4.0",
+    "is-svg": "^4.3.2",
+    "sharp": "^0.30.7",
+    "svgo": "^2.8.0",
+    "to-ico": "^1.1.5"
+  },
+  "devDependencies": {
+    "@tsconfig/node16": "^1.0.3",
+    "@types/sharp": "^0.30.4",
+    "@types/svgo": "^2.6.3",
+    "@types/to-ico": "^1.1.1",
+    "@typescript-eslint/eslint-plugin": "^5.30.7",
+    "@typescript-eslint/parser": "^5.30.7",
+    "eslint": "^8.20.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
+    "typescript": "^4.7.4"
+  }
+}