# icon-studio

**Repository Path**: lisf0/icon-studio

## Basic Information

- **Project Name**: icon-studio
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-22
- **Last Updated**: 2026-09-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# icon-studio

Pure Frontend Android Launcher Icon Generator

## Overview

icon-studio is an Android app icon generation tool running in the browser. It completes the full generation process from source image to multi-density launcher icons without backend services.

### Core Features

- **Drag-and-Drop Upload**: Supports dragging any square or non-square image as the source.
- **Multi-Density Output**: Automatically generates five density levels: mdpi / hdpi / xhdpi / xxhdpi / xxxhdpi.
- **Dual-Form Variants**: Simultaneously outputs square and round forms.
- **WebP Lossless Compression**: Uses WebP lossless encoding to ensure optimal image quality.
- **ZIP Packaging Download**: One-click package all artifacts into a ZIP file directly importable to Android Studio.
- **Internationalization Support**: Chinese / English bilingual switching.
- **Light/Dark Themes**: Supports light / dark / follow system three theme modes.

### Tech Stack

- Native JavaScript (No framework dependency)
- Alpine.js (Lightweight reactive UI)
- JSZip (Frontend packaging)
- WebP WASM Lossless Encoder

## Project Structure

```
icon-studio/
├── assets/                  # Frontend resources
│   ├── render.js           # Rendering core (includes roundPy/resizeBox algorithms)
│   ├── store.js            # State machine
│   ├── ui.js               # UI components
│   ├── i18n.js             # Internationalization module
│   ├── theme.js            # Theme management
│   ├── stencils.js         # Template asset loader
│   ├── outputs.js          # Artifact contract definition
│   ├── pipeline.js         # Generation pipeline
│   ├── errors.js           # Error code definitions
│   ├── webp-enc.js         # WebP WASM encoder wrapper
│   ├── style.css           # Component styles
│   ├── tokens.css          # Design tokens
│   └── vendor/             # Third-party libraries (Alpine.js, JSZip)
├── src_assets/             # Source assets (launcher templates)
│   └── launcher_stencil/
│       ├── circle/         # Circular icon template
│       └── square/         # Square icon template
├── test/                   # Test files
│   ├── unit.js             # Unit tests
│   ├── store.js            # State machine tests
│   ├── i18n.js             # Internationalization tests
│   ├── theme.js            # Theme tests
│   ├── errors.js           # Error code tests
│   └── golden.html         # Golden regression test
├── docs/                   # Design docs and implementation plans
│   ├── specs/              # Specification docs
│   └── superpowers/        # Implementation plans
├── tools/                  # Build and test tools
│   ├── build_assets.py     # Asset build
│   ├── build_webp_enc.py   # WebP encoder build
│   └── test_icon_studio.py # E2E test
└── index.html              # App entry
```

## Quick Start

### Using Pre-built Version

Open `index.html` directly in the browser to run (recommended to use a local server):

```bash
# Use any static server
npx serve .

# Or use Python
python -m http.server 8080
```

Then visit http://localhost:8080

### Development Environment

```bash
# Install dependencies
npm install

# Run Node unit tests (Layer 1 regression)
npm test

# Run E2E tests (requires browser)
python tools/test_icon_studio.py
```

## Usage Instructions

1. **Upload Image**: Drag the image into the upload area or click to select a file.
2. **Adjust Parameters**: Customize parameters such as background color.
3. **Preview Generation**: The system displays the generated icons of each density in the preview area.
4. **Download Artifacts**: Click the download button to obtain the ZIP package, which can be directly imported into Android Studio.

## Artifact Specifications

The generated ZIP package contains the following file structure:

```
adaptive_icon/
├── drawable-mdpi/
│   ├── ic_launcher_background.png
│   ├── ic_launcher_foreground.png
│   ├── ic_launcher.png           # square
│   └── ic_launcher_round.png     # round
├── drawable-hdpi/
│   └── ...
├── drawable-xhdpi/
│   └── ...
├── drawable-xxhdpi/
│   └── ...
├── drawable-xxxhdpi/
│   └── ...
└── drawable-anydpi-v26/
    ├── ic_launcher_background.xml
    ├── ic_launcher_foreground.xml
    └── ic_launcher.xml
playstore/
├── ic_launcher-playstore.png    # Multi-density Play Store icons
└── ...
```

## Test Levels

This project adopts a four-layer regression strategy to ensure quality:

1. **Node Unit Tests**: 5 independent entries (unit/store/i18n/theme/errors)
2. **Golden Composite Assertion**: Prevents "implementation errors where MAE happens to pass the threshold"
3. **E2E Smoke Test**: Full-link UI + file:// protocol
4. **Criteria Regression**: Automated verification of artifact consistency

## License

- Source Code: MIT License
- Assets: See `src_assets/NOTICE.md`
- Third-party Libraries: See `assets/vendor/NOTICE.md`