nexmoe--vidbee
wehub-resource-sync
102 行
2.6 KiB
Markdown
102 行
2.6 KiB
Markdown
# VidBee Documentation Icons
|
||
|
||
This directory contains the VidBee logo in various sizes for use in the documentation site.
|
||
|
||
## Source
|
||
|
||
All icons are generated from the original VidBee application icon located at:
|
||
`apps/desktop/build/icon.png`
|
||
|
||
## Available Sizes
|
||
|
||
| Filename | Size | Use Case |
|
||
|----------|------|----------|
|
||
| `icon.png` | 512×512 | Default/Original icon |
|
||
| `icon-16.png` | 16×16 | Browser favicon (small) |
|
||
| `icon-32.png` | 32×32 | Browser favicon (standard) |
|
||
| `icon-48.png` | 48×48 | Browser favicon (large) |
|
||
| `icon-64.png` | 64×64 | Small UI elements |
|
||
| `icon-128.png` | 128×128 | Medium UI elements |
|
||
| `icon-192.png` | 192×192 | PWA icon (Android) |
|
||
| `icon-256.png` | 256×256 | Large UI elements |
|
||
| `icon-512.png` | 512×512 | PWA splash screen, high-res displays |
|
||
| `apple-touch-icon.png` | 180×180 | iOS/macOS home screen icon |
|
||
| `favicon.png` | 32×32 | Standard favicon |
|
||
|
||
## Usage in Next.js
|
||
|
||
### In `app/layout.tsx` or `app/favicon.ico`:
|
||
|
||
```tsx
|
||
import type { Metadata } from 'next'
|
||
|
||
export const metadata: Metadata = {
|
||
title: 'VidBee Documentation',
|
||
description: 'Official VidBee documentation',
|
||
icons: {
|
||
icon: [
|
||
{ url: '/icon-16.png', sizes: '16x16', type: 'image/png' },
|
||
{ url: '/icon-32.png', sizes: '32x32', type: 'image/png' },
|
||
{ url: '/icon-48.png', sizes: '48x48', type: 'image/png' },
|
||
],
|
||
apple: [
|
||
{ url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
|
||
],
|
||
},
|
||
}
|
||
```
|
||
|
||
### For PWA (Progressive Web App):
|
||
|
||
Add to your `manifest.json` or `site.webmanifest`:
|
||
|
||
```json
|
||
{
|
||
"icons": [
|
||
{
|
||
"src": "/icon-192.png",
|
||
"sizes": "192x192",
|
||
"type": "image/png"
|
||
},
|
||
{
|
||
"src": "/icon-512.png",
|
||
"sizes": "512x512",
|
||
"type": "image/png"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## Regeneration
|
||
|
||
If you need to regenerate these icons from the source:
|
||
|
||
```bash
|
||
cd apps/docs/public
|
||
SOURCE="../../desktop/build/icon.png"
|
||
|
||
# Copy original
|
||
cp $SOURCE icon-original.png
|
||
|
||
# Generate sizes
|
||
sips -z 16 16 icon-original.png --out icon-16.png
|
||
sips -z 32 32 icon-original.png --out icon-32.png
|
||
sips -z 48 48 icon-original.png --out icon-48.png
|
||
sips -z 64 64 icon-original.png --out icon-64.png
|
||
sips -z 128 128 icon-original.png --out icon-128.png
|
||
sips -z 192 192 icon-original.png --out icon-192.png
|
||
sips -z 256 256 icon-original.png --out icon-256.png
|
||
sips -z 180 180 icon-original.png --out apple-touch-icon.png
|
||
|
||
# Create standard copies
|
||
cp icon-original.png icon-512.png
|
||
cp icon-original.png icon.png
|
||
cp icon-32.png favicon.png
|
||
```
|
||
|
||
## Notes
|
||
|
||
- All icons maintain the VidBee bee/honeycomb theme
|
||
- Icons use PNG format with transparency (RGBA)
|
||
- Generated using macOS `sips` tool for quality consistency
|