2026-01-10 21:46:54 +03:00
|
|
|
|
// Скрипт для генерации базовых 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 },
|
2026-01-10 21:52:43 +03:00
|
|
|
|
{ name: 'pwa-maskable-192x192.png', size: 192, maskable: true },
|
2026-01-10 21:46:54 +03:00
|
|
|
|
{ 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');
|
|
|
|
|
|
}
|
|
|
|
|
|
|
