game2 / client / scripts / gen-icons.mjs
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// One-off icon generator: renders the app icon SVG to the PNG sizes iOS/PWA need.
import sharp from 'sharp'
import { mkdirSync } from 'node:fs'

const svg = (pad) => `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#ffe3c8"/>
      <stop offset="1" stop-color="#e2725b"/>
    </linearGradient>
  </defs>
  <rect width="512" height="512" fill="url(#sky)"/>
  <circle cx="256" cy="150" r="62" fill="#fff6ec" opacity="0.9"/>
  <g transform="translate(${pad}, ${pad}) scale(${(512 - 2 * pad) / 512})">
    <g>
      <rect x="96"  y="352" width="76" height="76" rx="12" fill="#7fc7c4"/>
      <rect x="176" y="352" width="76" height="76" rx="12" fill="#f2c26b"/>
      <rect x="256" y="352" width="76" height="76" rx="12" fill="#c589bf"/>
      <rect x="336" y="352" width="76" height="76" rx="12" fill="#6f9fd8"/>
      <rect x="176" y="272" width="76" height="76" rx="12" fill="#e88a7d"/>
      <rect x="256" y="272" width="76" height="76" rx="12" fill="#93c47d"/>
      <rect x="256" y="192" width="76" height="76" rx="12" fill="#eba05c"/>
    </g>
  </g>
</svg>`

mkdirSync('public/icons', { recursive: true })

const jobs = [
  ['public/icons/icon-192.png', 192, 0],
  ['public/icons/icon-512.png', 512, 0],
  ['public/icons/icon-512-maskable.png', 512, 60],
  ['public/icons/apple-touch-icon.png', 180, 0],
]

for (const [path, size, pad] of jobs) {
  await sharp(Buffer.from(svg(pad))).resize(size, size).png().toFile(path)
  console.log('wrote', path)
}

static mirror of HEAD · about · clone: git clone https://git.ardegazu.ro/game2.git