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
48 lines
1.8 KiB
JavaScript
48 lines
1.8 KiB
JavaScript
// SVG to PNG converter using canvas (requires a browser environment or puppeteer)
|
||
// This is a simple converter for development purposes
|
||
|
||
const fs = require('fs');
|
||
const path = require('path');
|
||
|
||
console.log('SVG to PNG Converter');
|
||
console.log('===================\n');
|
||
|
||
const publicDir = path.join(__dirname, '..', 'public');
|
||
|
||
// Check if SVG files exist
|
||
const svgFiles = [
|
||
{ input: 'icon-192.svg', output: 'icon-192.png', size: 192 },
|
||
{ input: 'icon-512.svg', output: 'icon-512.png', size: 512 },
|
||
{ input: 'apple-touch-icon.svg', output: 'apple-touch-icon.png', size: 180 },
|
||
{ input: 'favicon.svg', output: 'favicon-32.png', size: 32 }
|
||
];
|
||
|
||
console.log('SVG files found:');
|
||
svgFiles.forEach(file => {
|
||
const exists = fs.existsSync(path.join(publicDir, file.input));
|
||
console.log(` ${exists ? '✓' : '✗'} ${file.input}`);
|
||
});
|
||
|
||
console.log('\n⚠️ PNG conversion requires additional tools:');
|
||
console.log('\nOption 1: Install sharp (recommended)');
|
||
console.log(' npm install --save-dev sharp');
|
||
console.log(' Then run: node scripts/convert-with-sharp.js');
|
||
|
||
console.log('\nOption 2: Use ImageMagick (if installed)');
|
||
console.log(' brew install imagemagick # on macOS');
|
||
console.log(' Then run:');
|
||
svgFiles.forEach(file => {
|
||
console.log(` convert public/${file.input} -resize ${file.size}x${file.size} public/${file.output}`);
|
||
});
|
||
|
||
console.log('\nOption 3: Use online converter');
|
||
console.log(' Visit: https://cloudconvert.com/svg-to-png');
|
||
console.log(' Upload SVG files and download PNG versions');
|
||
|
||
console.log('\nOption 4: Manual export from design tool');
|
||
console.log(' Open SVG files in Figma, Sketch, or Illustrator');
|
||
console.log(' Export as PNG at the required sizes');
|
||
|
||
console.log('\n📝 For now, the app will use SVG icons which work in most browsers.');
|
||
console.log(' PNG icons are recommended for better iOS Safari compatibility.');
|