Files
play-life/play-life-web/generate-icons.cjs
poignatov d5e4699bcf
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 46s
fix: добавлена maskable иконка 192x192 для Android (v3.8.2)
2026-01-10 21:52:43 +03:00

80 lines
2.9 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
// Скрипт для генерации базовых PWA иконок
// Требует: npm install sharp
const sharp = require('sharp');
const fs = require('fs');
const path = require('path');
const publicDir = path.join(__dirname, 'public');
// Создаем SVG шаблон для иконки
const createIconSVG = (size) => `
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 100 100">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4f46e5;stop-opacity:1" />
<stop offset="100%" style="stop-color:#7c3aed;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="100" height="100" rx="20" fill="url(#grad)"/>
<text x="50" y="70" font-family="Arial, sans-serif" font-size="60" font-weight="bold" fill="white" text-anchor="middle">P</text>
</svg>
`;
async function generateIcons() {
// Создаем базовый SVG
const baseSVG = createIconSVG(512);
const svgBuffer = Buffer.from(baseSVG);
// Генерируем иконки разных размеров
const sizes = [
{ name: 'favicon.ico', size: 32 },
{ name: 'apple-touch-icon.png', size: 180 },
{ name: 'pwa-192x192.png', size: 192 },
{ name: 'pwa-512x512.png', size: 512 },
{ name: 'pwa-maskable-192x192.png', size: 192, maskable: true },
{ name: 'pwa-maskable-512x512.png', size: 512, maskable: true }
];
for (const icon of sizes) {
let image = sharp(svgBuffer).resize(icon.size, icon.size);
if (icon.maskable) {
// Для maskable иконки добавляем padding (контент в центральных 80%)
const padding = icon.size * 0.1;
image = sharp({
create: {
width: icon.size,
height: icon.size,
channels: 4,
background: { r: 0, g: 0, b: 0, alpha: 0 }
}
})
.composite([{
input: await sharp(svgBuffer).resize(Math.round(icon.size * 0.8), Math.round(icon.size * 0.8)).toBuffer(),
left: Math.round(padding),
top: Math.round(padding)
}]);
}
const outputPath = path.join(publicDir, icon.name);
await image.png().toFile(outputPath);
console.log(`✓ Создана иконка: ${icon.name} (${icon.size}x${icon.size})`);
}
console.log('\n✓ Все иконки успешно созданы!');
}
// Проверяем наличие sharp
try {
require('sharp');
generateIcons().catch(console.error);
} catch (e) {
console.log('Для генерации иконок необходимо установить sharp:');
console.log('npm install sharp --save-dev');
console.log('\nИли создайте иконки вручную используя онлайн генераторы:');
console.log('- https://realfavicongenerator.net/');
console.log('- https://www.pwabuilder.com/imageGenerator');
}