index.mjs - main - apoleshchuk/webapp-icon

index.mjs
81 строка2 KB
Anton Poleshchuk
feat: скрипт генерации иконок веб-приложения
18 апр 2025, 23:03
18 апр 2025, 23:03b0e405f
import { readdir, mkdir, rm, readFile, writeFile } from "node:fs/promises";
import { basename, extname } from "node:path";

import imagemin from "imagemin";
import imageminSvgo from "imagemin-svgo";
import imageminPngquant from "imagemin-pngquant";

import sharp from "sharp";
import toIco from "to-ico";

const files = (await readdir("input")).filter((f) => extname(f) === ".svg");

await rm("output", { force: true, recursive: true });
await mkdir("output");

for (const filename of files) {
  const name = basename(filename, extname(filename));
  const dir = `output/${name}`;

  await mkdir(dir);

  const svg = (
    await imagemin([`input/${filename}`], {
      plugins: [imageminSvgo()],
    })
  ).find(({ sourcePath }) => extname(sourcePath) === ".svg");

  await writeFile(`${dir}/icon.svg`, svg.data);

  for (const [size, outputName] of [
    [32, "favicon-32"],
    [512, "icon-512"],
    [512, "icon-mask"],
    [192, "icon-192"],
    [180, "apple-touch-icon"],
  ]) {
    await sharp(`${dir}/icon.svg`)
      .resize(size)
      .toFile(`${dir}/${outputName}.png`);
  }

  await imagemin([`${dir}/*.png`], {
    destination: dir,
    plugins: [imageminPngquant()],
  });

  await writeFile(
    `${dir}/favicon.ico`,
    await toIco([await readFile(`${dir}/favicon-32.png`)], { resize: true })
  );

  await writeFile(
    `${dir}/index.html`,
    `<!DOCTYPE html>
<html>
  <head>
    <link rel="icon" href="/favicon.ico" sizes="32x32" />
    <link rel="icon" href="/icon.svg" type="image/svg+xml" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <!-- 180×180 -->
    <link rel="manifest" href="/manifest.webmanifest">
  </head>
</html>
`
  );

  await writeFile(
    `${dir}/manifest.webmanifest`,
    `{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}`
  );

  await rm(`${dir}/favicon-32.png`);

  console.log(dir);
  console.log(`Check ${dir}/icon-mask.png via https://maskable.app`);
}