{"_id":"@dabenga/pwa-icon-generator","_rev":"3-952738f6555f396a23851cb3d7049fb6","name":"@dabenga/pwa-icon-generator","dist-tags":{"latest":"1.1.1"},"versions":{"1.0.0":{"name":"@dabenga/pwa-icon-generator","version":"1.0.0","keywords":["pwa","icons","maskable","monochrome","progressive-web-app","favicon","apple-touch-icon","manifest","cli"],"author":{"name":"DaBenga"},"license":"MIT","_id":"@dabenga/pwa-icon-generator@1.0.0","maintainers":[{"name":"dabenga","email":"benjamin@enmouvance.com"}],"homepage":"https://github.com/DaBenga/pwa-icon-generator#readme","bugs":{"url":"https://github.com/DaBenga/pwa-icon-generator/issues"},"bin":{"pwa-icons":"bin/pwa-icons.js"},"dist":{"shasum":"b6c55de0f4a174d3d5498b87c9d422422f505f88","tarball":"https://registry.npmjs.org/@dabenga/pwa-icon-generator/-/pwa-icon-generator-1.0.0.tgz","fileCount":10,"integrity":"sha512-f/rj1NnXIprXN5D9jfR+r60sJAGiJV+l/kh5Z0ppNyxBwCdVNVaHJF87/c0aRBCpl3gF7hZuLb2aoAdyXhJCew==","signatures":[{"sig":"MEUCIF/IVSf541nXC/lZY60v3rSWAscYwcfaJcqnQYKwKF7YAiEAgp8t/3CWr+JqRD+acrz7oHUSP01MTPRb+8UkSKN8C3o=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31793},"main":"lib/index.js","engines":{"node":">=18.0.0"},"gitHead":"ac32a345e551c48020a515fbbfbfd17758ddf935","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"dabenga","email":"benjamin@enmouvance.com"},"repository":{"url":"git+https://github.com/DaBenga/pwa-icon-generator.git","type":"git"},"_npmVersion":"10.8.2","description":"Generate PWA icons (standard, maskable, monochrome) from source files with automated scripts","directories":{},"_nodeVersion":"20.19.5","dependencies":{"chalk":"^4.1.2","sharp":"^0.34.5","commander":"^12.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/pwa-icon-generator_1.0.0_1765111007831_0.9752281286217408","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@dabenga/pwa-icon-generator","version":"1.1.0","keywords":["pwa","icons","maskable","monochrome","progressive-web-app","favicon","apple-touch-icon","manifest","cli"],"author":{"name":"DaBenga"},"license":"MIT","_id":"@dabenga/pwa-icon-generator@1.1.0","maintainers":[{"name":"dabenga","email":"benjamin@enmouvance.com"}],"homepage":"https://github.com/DaBenga/pwa-icon-generator#readme","bugs":{"url":"https://github.com/DaBenga/pwa-icon-generator/issues"},"bin":{"pwa-icons":"bin/pwa-icons.js"},"dist":{"shasum":"06e8ad529610e33b5dd08409bc0cfce824379507","tarball":"https://registry.npmjs.org/@dabenga/pwa-icon-generator/-/pwa-icon-generator-1.1.0.tgz","fileCount":11,"integrity":"sha512-yzeOWMFoiSX6ffFr7+G4VUEKxuw0q0kXKd78a7APnxzP1qZ6w0yTnLNPmZJU60V83VBiyZbmx4Xc9ifGu5remQ==","signatures":[{"sig":"MEUCIQDa51t0UoDZozCJg4yRZfLq3PZ0nE7upwgirkJ+Db5O3gIgXr3zy+tmLwfCMQdavnkXVVQx4WgzGiVIHd0Db2vVUwA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":43389},"main":"lib/index.js","engines":{"node":">=18.0.0"},"gitHead":"40aabd22cb5f1861f76f471382638be116f4442a","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"dabenga","email":"benjamin@enmouvance.com"},"repository":{"url":"git+https://github.com/DaBenga/pwa-icon-generator.git","type":"git"},"_npmVersion":"10.8.2","description":"Generate PWA icons (standard, maskable, monochrome) from source files with automated scripts","directories":{},"_nodeVersion":"20.19.5","dependencies":{"chalk":"^4.1.2","sharp":"^0.34.5","commander":"^12.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/pwa-icon-generator_1.1.0_1765138344129_0.291561075058018","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@dabenga/pwa-icon-generator","version":"1.1.1","description":"Generate PWA icons (standard, maskable, monochrome) from source files with automated scripts","main":"lib/index.js","bin":{"pwa-icons":"bin/pwa-icons.js"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["pwa","icons","maskable","monochrome","progressive-web-app","favicon","apple-touch-icon","manifest","cli"],"author":{"name":"DaBenga"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/DaBenga/pwa-icon-generator.git"},"bugs":{"url":"https://github.com/DaBenga/pwa-icon-generator/issues"},"homepage":"https://github.com/DaBenga/pwa-icon-generator#readme","dependencies":{"sharp":"^0.34.5","commander":"^12.0.0","chalk":"^4.1.2"},"engines":{"node":">=18.0.0"},"_id":"@dabenga/pwa-icon-generator@1.1.1","gitHead":"8c2dbdbdf7ef97738ff304fc4176fbf60513f7c5","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-wvwsvJs5sUy+yPnGTi1AANwKKreyGQwZsBVhXgxh8fG+MfBT9HsSuoOTQp7EhvUbvasmiAQn+zIKuPSDpybF8Q==","shasum":"440a45f67d8271d76d3f1c220efd606647353147","tarball":"https://registry.npmjs.org/@dabenga/pwa-icon-generator/-/pwa-icon-generator-1.1.1.tgz","fileCount":11,"unpackedSize":44217,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCJQsQZl7z55dddVjqsVZgZYWozXw8Oeei/BDlQr/vcugIhAPR4i0sxEo+PTMi9OxpfeYl4041N7wHMSqYIVs82e33R"}]},"_npmUser":{"name":"dabenga","email":"benjamin@enmouvance.com"},"directories":{},"maintainers":[{"name":"dabenga","email":"benjamin@enmouvance.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/pwa-icon-generator_1.1.1_1765211909210_0.09698859335548637"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-07T12:36:47.643Z","modified":"2025-12-08T16:38:29.537Z","1.0.0":"2025-12-07T12:36:47.965Z","1.1.0":"2025-12-07T20:12:24.285Z","1.1.1":"2025-12-08T16:38:29.358Z"},"bugs":{"url":"https://github.com/DaBenga/pwa-icon-generator/issues"},"author":{"name":"DaBenga"},"license":"MIT","homepage":"https://github.com/DaBenga/pwa-icon-generator#readme","keywords":["pwa","icons","maskable","monochrome","progressive-web-app","favicon","apple-touch-icon","manifest","cli"],"repository":{"type":"git","url":"git+https://github.com/DaBenga/pwa-icon-generator.git"},"description":"Generate PWA icons (standard, maskable, monochrome) from source files with automated scripts","maintainers":[{"name":"dabenga","email":"benjamin@enmouvance.com"}],"readme":"# @dabenga/pwa-icon-generator\n\n🎨 **Generate PWA icons (standard, maskable, monochrome) from source files with automated CLI**\n\nA powerful CLI tool to generate all necessary PWA icons from your source files. Supports standard icons, maskable icons for adaptive themes (Android/iOS), and monochrome icons for custom themes (Material You, iOS).\n\n## ✨ Features\n\n- 🎯 **Generate 24 icons** from 2 source files\n- 📱 **Maskable icons** for adaptive Android/iOS themes\n- 🎨 **Monochrome icons** for custom themes (Material You)\n- 🍎 **Apple Touch Icon** (180×180)\n- 🌐 **Favicon** generation\n- ✅ **Verification** of PWA configuration\n- 🚀 **Project initialization** with templates\n- 🎭 **Framework support** (Next.js, React, Vue, Vanilla)\n\n## 📦 Installation\n\n### Global Installation (Recommended)\n\n```bash\nnpm install -g @dabenga/pwa-icon-generator\n```\n\n### Local Installation\n\n```bash\nnpm install --save-dev @dabenga/pwa-icon-generator\n```\n\n## 🚀 Quick Start\n\n### 1. Initialize your project\n\n```bash\npwa-icons init\n```\n\nThis will:\n- Create necessary directories (`public/`, `public/icons/`)\n- Add scripts to your `package.json`\n- Create manifest template\n- Create README\n\n### 2. Add your source files\n\nPlace these files in `public/`:\n- `maskable.png` (1024×1024 recommended)\n- `monochrome.png` (1024×1024 recommended, black & white only)\n- `favicon.png` (optional, 32×32 or larger)\n\n### 3. Generate icons\n\n```bash\npwa-icons generate\n```\n\nThis generates:\n- 8 standard icons (72, 96, 128, 144, 152, 192, 384, 512)\n- 8 maskable icons\n- 8 monochrome icons\n- 1 Apple Touch Icon (180×180)\n- 1 Apple Touch Icon (180×180)\n- 2 Favicons (32×32 .ico and .png)\n\n### 4. Verify configuration\n\n```bash\npwa-icons verify\n```\n\n### 5. View preview\n\n```bash\npwa-icons preview\n# Then open public/icons/preview.html in your browser\n```\n\n## 📖 Usage\n\n### Commands\n\n#### `pwa-icons init`\n\nInitialize PWA icons setup in your project.\n\n**Options:**\n- `-f, --framework <framework>` - Framework (nextjs, react, vue, vanilla) [default: \"nextjs\"]\n\n**Example:**\n```bash\npwa-icons init --framework nextjs\n```\n\n#### `pwa-icons generate`\n\nGenerate all PWA icons from source files.\n\n**Options:**\n- `-s, --source <dir>` - Source directory [default: \"public\"]\n- `-o, --output <dir>` - Output directory [default: \"public/icons\"]\n- `--maskable <file>` - Path to maskable source [default: \"public/maskable.png\"]\n- `--monochrome <file>` - Path to monochrome source [default: \"public/monochrome.png\"]\n- `--favicon <file>` - Path to favicon source [default: \"public/favicon.png\"]\n- `--sizes <sizes>` - Comma-separated sizes [default: \"72,96,128,144,152,192,384,512\"]\n\n**Example:**\n```bash\npwa-icons generate --sizes 192,512\n```\n\n#### `pwa-icons verify`\n\nVerify PWA icon configuration.\n\n**Options:**\n- `-d, --dir <dir>` - Project directory [default: \".\"]\n\n**Example:**\n```bash\npwa-icons verify\n```\n\n## 📁 Project Structure\n\nAfter running `pwa-icons init` and `pwa-icons generate`:\n\n```\nyour-project/\n├── public/\n│   ├── icons/\n│   │   ├── icon-72x72.png\n│   │   ├── icon-72x72-maskable.png\n│   │   ├── icon-72x72-monochrome.png\n│   │   ├── ... (24 icons total)\n│   │   └── README.md\n│   ├── maskable.png (your source)\n│   ├── monochrome.png (your source)\n│   ├── apple-touch-icon.png\n│   ├── favicon.ico\n│   └── favicon.png\n└── src/app/manifest.ts (or public/manifest.json)\n```\n\n## 🎨 Icon Types\n\n### Standard Icons\nDefault icons used by most browsers and devices.\n\n**Sizes:** 72, 96, 128, 144, 152, 192, 384, 512\n\n### Maskable Icons\nAdaptive icons that allow Android and iOS to apply different shapes (circle, rounded square, etc.) based on the user's theme.\n\n**Purpose:** `maskable`  \n**Safe Zone:** Keep important elements within 80% of the diameter\n\n**Resources:**\n- [Maskable.app Editor](https://maskable.app/editor) - Test your maskable icons\n\n### Monochrome Icons\nIcons for custom themes on Android 13+ (Material You) and iOS. The system applies its own color.\n\n**Purpose:** `monochrome`  \n**Requirements:** Black and white only\n\n## 📱 Framework Integration\n\n### Next.js\n\nThe tool automatically creates `src/app/manifest.ts`:\n\n```typescript\nimport type { MetadataRoute } from \"next\";\n\nexport default function manifest(): MetadataRoute.Manifest {\n    return {\n        name: \"Your App\",\n        icons: [\n            {\n                src: \"/icons/icon-192x192-maskable.png\",\n                sizes: \"192x192\",\n                type: \"image/png\",\n                purpose: \"maskable\",\n            },\n            // ... more icons\n        ],\n    };\n}\n```\n\n### React / Vue / Vanilla\n\nCreates `public/manifest.json`:\n\n```json\n{\n  \"name\": \"Your App\",\n  \"icons\": [\n    {\n      \"src\": \"/icons/icon-192x192-maskable.png\",\n      \"sizes\": \"192x192\",\n      \"type\": \"image/png\",\n      \"purpose\": \"maskable\"\n    }\n  ]\n}\n```\n\n## 🔧 NPM Scripts\n\nAfter initialization, these scripts are added to your `package.json`:\n\n```json\n{\n  \"scripts\": {\n    \"generate:icons\": \"pwa-icons generate\",\n    \"generate:icons\": \"pwa-icons generate\",\n    \"verify:icons\": \"pwa-icons verify\",\n    \"preview:icons\": \"pwa-icons preview\"\n  }\n}\n```\n\n## 📐 Source File Requirements\n\n### maskable.png\n- **Size:** 1024×1024 pixels minimum\n- **Format:** PNG with transparency\n- **Safe Zone:** Keep important elements within 80% diameter circle\n- **Content:** Full logo with all details\n\n### monochrome.png\n- **Size:** 1024×1024 pixels minimum\n- **Format:** PNG with transparency\n- **Colors:** Black and white only (or grayscale)\n- **Content:** Simple, recognizable silhouette\n \n### favicon.png (Optional)\n- **Size:** 32×32 pixels or larger\n- **Format:** PNG with transparency\n- **Content:** Small, clear icon for browser tabs\n\n## ✅ Testing\n\n### Visual Test\nAfter generation, test your icons visually in the browser.\n\n### Device Testing\n\n**iOS (Safari):**\n1. Open Safari on iPhone/iPad\n2. Tap Share → \"Add to Home Screen\"\n3. Check icon appearance\n\n**Android (Chrome):**\n1. Open Chrome on Android\n2. Menu → \"Install app\"\n3. Check icon on home screen\n4. Test with different launchers\n\n**Desktop:**\n1. Install PWA via browser\n2. Check icon in taskbar/dock\n\n### Tools\n\n- [Maskable.app Editor](https://maskable.app/editor) - Test maskable icons\n- [PWA Builder](https://www.pwabuilder.com/) - Validate manifest\n- Lighthouse (Chrome DevTools) - PWA audit\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 📄 License\n\nMIT © DaBenga\n\n## 🔗 Links\n\n- [GitHub Repository](https://github.com/DaBenga/pwa-icon-generator)\n- [NPM Package](https://www.npmjs.com/package/@dabenga/pwa-icon-generator)\n- [Report Issues](https://github.com/DaBenga/pwa-icon-generator/issues)\n\n## 💡 Tips\n\n1. **Safe Zone for Maskable Icons:** Use [Maskable.app Editor](https://maskable.app/editor) to ensure your logo fits within the safe zone.\n\n2. **Monochrome Design:** Keep it simple! Complex designs don't work well as monochrome icons.\n\n3. **Regular Updates:** Regenerate icons whenever you update your brand/logo:\n   ```bash\n   npm run generate:icons\n   ```\n\n4. **Verification:** Always verify after generation:\n   ```bash\n   npm run verify:icons\n   ```\n\n## 📊 What Gets Generated\n\n| Type | Count | Purpose |\n|------|-------|---------|\n| Standard Icons | 8 | Default browser/device icons |\n| Maskable Icons | 8 | Adaptive Android/iOS themes |\n| Monochrome Icons | 8 | Custom themes (Material You) |\n| Apple Touch Icon | 1 | iOS home screen (180×180) |\n| Favicon | 2 | Browser tab (32×32 .ico and .png) |\n| **Total** | **27** | Complete PWA icon set |\n\n---\n\nMade with ❤️ by [DaBenga](https://github.com/DaBenga)\n","readmeFilename":"README.md"}