How khairinkamarizal/logokit works
LogoKit is a browser-based logo asset-pack generator. The user enters a brand name, uploads and orders logo assets, configures colors and export options, reviews the estimated ZIP contents, then generates and downloads the pack. The generator branches by SVG versus raster input: SVGs receive recolored digital variants and CMYK EPS exports, while raster art is preserved and rendered into supported raster formats. The README documents these export capabilities; sampled generator code confirms its calls into format and packaging utilities, while unsampled step implementations are represented by their exact tree paths.
Main entry points: index.vue Wizard coordinator · generator.ts Pack generator · GenerateStep.vue Export review · zip.ts ZIP creation
Components 17
Brand Setup
- Wizard coordinator
app/pages/index.vue - Brand details
app/components/steps/BrandStep.vue - Logo assets
app/components/steps/AssetsStep.vue - Colors and options
app/components/steps/ColorsStep.vue - Step navigation
app/components/stepper/StepNav.vue - Job summary
app/components/stepper/SummarySidebar.vue - Export review
app/components/steps/GenerateStep.vue - ZIP tree preview
app/components/steps/ZipTreePreview.vue
Pack Generation
- Pack generator
app/utils/generator.ts
Format Processing
- Color logic
app/utils/color.ts - SVG processing
app/utils/svg.ts - Raster rendering
app/utils/raster.ts - CMYK EPS export
app/utils/eps.ts
ZIP Delivery
- ZIP creation
app/utils/zip.ts - Browser download
app/utils/zip.ts
Other components
- Brand user
- Browser
Connections 19
- Brand user → Wizard coordinator: uses wizard
- Wizard coordinator → Step navigation: renders navigation
- Wizard coordinator → Brand details: renders step
- Wizard coordinator → Logo assets: renders step
- Wizard coordinator → Colors and options: renders step
- Wizard coordinator → Job summary: renders summary
- Wizard coordinator → Export review: renders review
- Wizard coordinator → Pack generator: requests pack
- Wizard coordinator → Color logic: derives SVG color
- Wizard coordinator → ZIP creation: downloads ZIP
- Wizard coordinator → Export review: passes preview data
- Export review → ZIP tree preview: displays structure
- Pack generator → Color logic: checks contrast and names
- Pack generator → SVG processing: parses and recolors
- Pack generator → Raster rendering: renders raster outputs
- Pack generator → CMYK EPS export: exports print artwork
- Pack generator → ZIP creation: packages generated files
- CMYK EPS export → Color logic: converts CMYK
- ZIP creation → Browser: saves ZIP file