valknar/home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a9787685e39a5b00a5d9ad2b4dfb1bbf3028747e
home/Projects/docs.pivoine.art/components/icons/ICON_GENERATION.md

6.9 KiB
Raw Blame History

Icon Generation Summary

✅ Completed Tasks

1. React Component Refactoring

File: components/icons/PivoineDocsIcon.tsx

Changes Made:

  • ✅ Reduced petal count for cleaner design:
    • Outer petals: 8 → 6 petals (60° spacing)
    • Middle petals: 8 → 6 petals (offset by 30°)
    • Inner petals: 10 → 8 petals (45° spacing)
    • Total: 26 → 20 petals
  • ✅ Fixed petal positioning - now properly radiate from center
  • ✅ Reduced bloom particles from 12 to 10

Petal Layout:

Outer Layer (6 petals at 60° intervals):
  0°, 60°, 120°, 180°, 240°, 300°
  
Middle Layer (6 petals at 60° intervals, offset by 30°):
  30°, 90°, 150°, 210°, 270°, 330°
  
Inner Layer (8 petals at 45° intervals):
  0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°

2. Static SVG Files Generated

favicon.svg

Location: public/favicon.svg

Characteristics:

  • Static peony in semi-open bloom state
  • Petals positioned at 75% scale with 20px translate
  • Optimized for small sizes (16x16 to 64x64)
  • No animations
  • Perfect for browser tab icons

Usage in HTML:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

icon.svg

Location: public/icon.svg

Characteristics:

  • Static peony in more open bloom state
  • Petals positioned at 85-90% scale with larger translate
  • Optimized for larger sizes (128x128 to 512x512)
  • Enhanced visibility with sparkles
  • Slightly larger center for better recognition
  • Already referenced in manifest.json

Current Manifest Reference:

{
  "src": "/icon.svg",
  "sizes": "any",
  "type": "image/svg+xml",
  "purpose": "any maskable"
}

📋 Next Steps (Optional)

Generate PNG Versions

The manifest.json references PNG versions that should be generated:

  1. icon-192.png (192x192)

    • For Android home screen
    • Can be generated from icon.svg

  2. icon-512.png (512x512)

    • For high-resolution displays
    • For PWA splash screens
    • Can be generated from icon.svg

How to Generate PNGs from SVG

Option 1: Using ImageMagick

# Install ImageMagick if needed
sudo apt install imagemagick

# Generate 192x192
convert -background none -density 300 public/icon.svg -resize 192x192 public/icon-192.png

# Generate 512x512
convert -background none -density 300 public/icon.svg -resize 512x512 public/icon-512.png

Option 2: Using Inkscape

# Install Inkscape if needed
sudo apt install inkscape

# Generate 192x192
inkscape public/icon.svg --export-type=png --export-filename=public/icon-192.png --export-width=192 --export-height=192

# Generate 512x512
inkscape public/icon.svg --export-type=png --export-filename=public/icon-512.png --export-width=512 --export-height=512

Option 3: Using Online Tools

Option 4: Using Node.js (sharp)

const sharp = require('sharp');
const fs = require('fs');

const svg = fs.readFileSync('public/icon.svg');

// 192x192
sharp(svg)
  .resize(192, 192)
  .png()
  .toFile('public/icon-192.png');

// 512x512
sharp(svg)
  .resize(512, 512)
  .png()
  .toFile('public/icon-512.png');

🎨 Icon Comparison

Favicon.svg (More Closed)

Outer:  scale(0.75) translate(20px) - 75% opacity
Middle: scale(0.80) translate(14px) - 85% opacity  
Inner:  scale(0.85) translate(8px)  - 92% opacity

Best for: 16x16, 32x32, 64x64 favicon sizes

Icon.svg (More Open)

Outer:  scale(0.85) translate(26px) - 82% opacity
Middle: scale(0.88) translate(18px) - 88% opacity
Inner:  scale(0.90) translate(12px) - 94% opacity

Best for: 128x128, 192x192, 512x512 PWA icons

🔍 Visual Differences

React Component States

  1. Normal (Closed Bud): scale(0.3-0.5) - Gentle breathing
  2. Hover (Full Bloom): scale(1.0-1.1) - Petals fully extended
  3. Click (Closing): Animated return to closed state

Static SVG States

  1. favicon.svg: Semi-open (between normal and hover)
  2. icon.svg: More open (closer to hover state)

📁 File Structure

docs.pivoine.art/
├── components/icons/
│   ├── PivoineDocsIcon.tsx  ✅ Updated (20 petals)
│   ├── PivoineDocsIcon.css
│   ├── Demo.tsx
│   ├── README.md
│   ├── REFACTORING_SUMMARY.md
│   ├── VISUAL_GUIDE.md
│   └── ICON_GENERATION.md  ← This file
└── public/
    ├── favicon.svg  ✅ Created (semi-open bloom)
    ├── icon.svg     ✅ Created (more open bloom)
    ├── icon-192.png ⏳ TODO (generate from icon.svg)
    ├── icon-512.png ⏳ TODO (generate from icon.svg)
    └── manifest.json ✅ Already configured

✨ Key Features of Generated Icons

Both SVGs Include:

  • ✅ 20-petal peony structure (6+6+8)
  • ✅ Multi-layered gradients (pink, purple, magenta, rose)
  • ✅ Golden center with stamen details
  • ✅ Document pages in center
  • ✅ Text lines representing documentation
  • ✅ Glow and shadow filters
  • ✅ Optimized for clarity at target sizes

Icon.svg Additionally Has:

  • ✅ Sparkles at corners
  • ✅ Slightly larger center (r=28 vs r=26)
  • ✅ Enhanced glow filters
  • ✅ Better visibility for larger display

🚀 Usage Examples

In React Components

import PivoineDocsIcon from '@/components/icons/PivoineDocsIcon'

// Interactive version
<PivoineDocsIcon size="128px" />

// Static version (matches icon.svg appearance)
<PivoineDocsIcon size="128px" interactive={false} />

In HTML Head

<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/icon-512.png">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/icon-192.png">

<!-- PWA Manifest -->
<link rel="manifest" href="/manifest.json">

In PWA Manifest (Already Done)

{
  "icons": [
    {
      "src": "/icon.svg",
      "sizes": "any",
      "type": "image/svg+xml"
    }
  ]
}

🎯 Quality Checklist

  • ✅ Petals properly radiate from center
  • ✅ Reduced to 20 petals for cleaner look
  • ✅ Gradients render correctly
  • ✅ Center documentation pages visible
  • ✅ Text lines legible
  • ✅ Filters apply properly (glow, shadow)
  • ✅ favicon.svg optimized for small sizes
  • ✅ icon.svg optimized for large sizes
  • ✅ Both SVGs are valid and render correctly
  • ✅ manifest.json references correct files
  • ⏳ PNG versions to be generated (optional)

📝 Notes

  • SVG icons work great in modern browsers without PNG fallbacks
  • PNG versions are recommended for older browsers and some PWA scenarios
  • The icon design scales beautifully from 16x16 to 512x512
  • Semi-open bloom state was chosen for static icons as it's recognizable and beautiful
  • React component remains fully interactive with hover/click animations

Generated: October 2025
Status: ✅ Complete - Ready for production use

Reference in New Issue View Git Blame Copy Permalink