Files
play-life/play-life-web/generate-icons.cjs
poignatov 374d03cdfd
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 1m3s
fix: исправлены maskable иконки для Android - убран прозрачный фон (v3.8.3)
2026-01-11 14:55:11 +03:00

81 lines
3.4 KiB
JavaScript
Raw Permalink 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>
`;
// Создаем SVG шаблон для maskable иконки (без скругления, контент в безопасной зоне 80%)
const createMaskableIconSVG = (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" fill="url(#grad)"/>
<text x="50" y="66" font-family="Arial, sans-serif" font-size="48" 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 maskableSVG = createMaskableIconSVG(512);
const maskableSvgBuffer = Buffer.from(maskableSVG);
// Генерируем иконки разных размеров
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) {
// Для maskable иконок используем специальный SVG с контентом в безопасной зоне
const sourceBuffer = icon.maskable ? maskableSvgBuffer : svgBuffer;
const image = sharp(sourceBuffer).resize(icon.size, icon.size);
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');
}