Paul Bailey
6cb9a593d4
- Generate app icons in multiple sizes (192x192, 512x512, 180x180, 32x32) - Create favicon and apple-touch-icon SVG files - Add comprehensive PWA meta tags in app layout - Configure theme color (#3B82F6) and background color - Update manifest.json with icon references (PNG and SVG) - Create icon generation scripts (SVG and PNG conversion) - Add browser-based PNG icon generator (HTML) - Create comprehensive PWA testing guide - Add icon setup documentation Requirements: 4.1, 4.2 Task: 13. Add PWA assets and metadata
79 lines
3.2 KiB
JavaScript
79 lines
3.2 KiB
JavaScript
// Icon generation script for PWA
|
|
// This script creates SVG icons and PNG versions using canvas (Node.js)
|
|
// For production PWA support, especially on iOS
|
|
|
|
const fs = require('fs');
|
|
const path = require('path');
|
|
|
|
// Create SVG icon with proper structure
|
|
function createSVGIcon(size, outputPath) {
|
|
const cornerRadius = size * 0.25;
|
|
const checkStartX = size * 0.3;
|
|
const checkStartY = size * 0.5;
|
|
const checkMidX = size * 0.45;
|
|
const checkMidY = size * 0.65;
|
|
const checkEndX = size * 0.7;
|
|
const checkEndY = size * 0.35;
|
|
const strokeWidth = size * 0.08;
|
|
|
|
const line1X = size * 0.25;
|
|
const line1Y = size * 0.6;
|
|
const line1Width = size * 0.5;
|
|
const line1Height = size * 0.08;
|
|
const lineRadius = size * 0.02;
|
|
|
|
const line2X = size * 0.25;
|
|
const line2Y = size * 0.72;
|
|
const line2Width = size * 0.4;
|
|
const line2Height = size * 0.08;
|
|
|
|
const svg = `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="${size}" height="${size}" rx="${cornerRadius}" fill="#3B82F6"/>
|
|
<path d="M${checkStartX} ${checkStartY}L${checkMidX} ${checkMidY}L${checkEndX} ${checkEndY}"
|
|
stroke="white" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<rect x="${line1X}" y="${line1Y}" width="${line1Width}" height="${line1Height}" rx="${lineRadius}" fill="white"/>
|
|
<rect x="${line2X}" y="${line2Y}" width="${line2Width}" height="${line2Height}" rx="${lineRadius}" fill="white"/>
|
|
</svg>`;
|
|
|
|
fs.writeFileSync(outputPath, svg);
|
|
console.log(`✓ Created ${path.basename(outputPath)}`);
|
|
return svg;
|
|
}
|
|
|
|
// Create a simple favicon SVG
|
|
function createFaviconSVG(outputPath) {
|
|
const svg = `<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="32" height="32" rx="8" fill="#3B82F6"/>
|
|
<path d="M9.6 16L14.4 20.8L22.4 11.2"
|
|
stroke="white" stroke-width="2.56" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<rect x="8" y="19.2" width="16" height="2.56" rx="0.64" fill="white"/>
|
|
<rect x="8" y="23.04" width="12.8" height="2.56" rx="0.64" fill="white"/>
|
|
</svg>`;
|
|
|
|
fs.writeFileSync(outputPath, svg);
|
|
console.log(`✓ Created ${path.basename(outputPath)}`);
|
|
}
|
|
|
|
// Main execution
|
|
const publicDir = path.join(__dirname, '..', 'public');
|
|
|
|
console.log('Generating PWA icons...\n');
|
|
|
|
// Create SVG icons
|
|
createSVGIcon(192, path.join(publicDir, 'icon-192.svg'));
|
|
createSVGIcon(512, path.join(publicDir, 'icon-512.svg'));
|
|
createSVGIcon(180, path.join(publicDir, 'apple-touch-icon.svg'));
|
|
createFaviconSVG(path.join(publicDir, 'favicon.svg'));
|
|
|
|
console.log('\n✓ All SVG icons generated successfully!');
|
|
console.log('\nFor optimal PWA support (especially iOS), convert SVGs to PNG:');
|
|
console.log(' 1. Using online tools: https://cloudconvert.com/svg-to-png');
|
|
console.log(' 2. Using ImageMagick: convert icon-192.svg icon-192.png');
|
|
console.log(' 3. Using design tools: Figma, Sketch, or Adobe Illustrator');
|
|
console.log('\nRequired PNG files:');
|
|
console.log(' - icon-192.png (192x192)');
|
|
console.log(' - icon-512.png (512x512)');
|
|
console.log(' - apple-touch-icon.png (180x180)');
|
|
console.log(' - favicon.ico (32x32, multi-size)');
|
|
console.log('\nNote: iOS Safari requires PNG format for apple-touch-icon.');
|