50c53c8b63
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 46s
85 lines
4.0 KiB
JavaScript
85 lines
4.0 KiB
JavaScript
// Скрипт для генерации базовых 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)"/>
|
||
<g transform="translate(50, 50) scale(0.136701675) translate(-488, -488)">
|
||
<path fill="white" d="M442 730V349h55c13 0 26-1 38 3 19 6 33 22 39 41 3 8 5 15 4 24a65 65 0 0 1-29 49c-2 2-6 3-7 6-1 5 4 13 6 17 3 12 4 24 4 36 10-2 19-8 27-13 57-36 69-114 33-168-16-24-45-44-73-49-22-4-46 0-69-1h-38c-9 0-18-1-26 3-9 3-17 15-18 24v358c0 11-1 23 4 33 9 21 31 18 50 18m28-254v254h105c14 0 33 3 46-4 18-11 16-40-3-48-9-4-21-2-31-2h-63V546c0-17 4-40-6-55-11-16-31-15-48-15z"/>
|
||
</g>
|
||
</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)"/>
|
||
<g transform="translate(50, 46) scale(0.1139180625) translate(-501, -501)">
|
||
<path fill="white" d="M442 730V349h55c13 0 26-1 38 3 19 6 33 22 39 41 3 8 5 15 4 24a65 65 0 0 1-29 49c-2 2-6 3-7 6-1 5 4 13 6 17 3 12 4 24 4 36 10-2 19-8 27-13 57-36 69-114 33-168-16-24-45-44-73-49-22-4-46 0-69-1h-38c-9 0-18-1-26 3-9 3-17 15-18 24v358c0 11-1 23 4 33 9 21 31 18 50 18m28-254v254h105c14 0 33 3 46-4 18-11 16-40-3-48-9-4-21-2-31-2h-63V546c0-17 4-40-6-55-11-16-31-15-48-15z"/>
|
||
</g>
|
||
</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-new.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');
|
||
}
|
||
|