Loading source
Pulling the file list, source metadata, and syntax-aware rendering for this listing.
Source from repo
Comprehensive AI design skill providing design intelligence across platforms with 161 reasoning rules.
Files
Skill
Size
Entrypoint
Format
Open file
Syntax-highlighted preview of this file as included in the skill package.
scripts/icon/generate.py
1#!/usr/bin/env python32# -*- coding: utf-8 -*-3"""4Icon Generation Script using Gemini 3.1 Pro Preview API5Generates SVG icons via text generation (SVG is XML text format)67Model: gemini-3.1-pro-preview - best thinking, token efficiency, factual consistency89Usage:10python generate.py --prompt "settings gear icon" --style outlined11python generate.py --prompt "shopping cart" --style filled --color "#6366F1"12python generate.py --name "dashboard" --category navigation --style duotone13python generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons14python generate.py --prompt "user profile" --sizes "16,24,32,48"15"""1617import argparse18import json19import os20import re21import sys22import time23from pathlib import Path24from datetime import datetime252627def load_env():28"""Load .env files in priority order"""29env_paths = [30Path(__file__).parent.parent.parent / ".env",31Path.home() / ".claude" / "skills" / ".env",32Path.home() / ".claude" / ".env"33]34for env_path in env_paths:35if env_path.exists():36with open(env_path) as f:37for line in f:38line = line.strip()39if line and not line.startswith('#') and '=' in line:40key, value = line.split('=', 1)41if key not in os.environ:42os.environ[key] = value.strip('"\'')4344load_env()4546try:47from google import genai48from google.genai import types49except ImportError:50print("Error: google-genai package not installed.")51print("Install with: pip install google-genai")52sys.exit(1)535455# ============ CONFIGURATION ============56GEMINI_API_KEY = os.environ.get("GEMINI_API_KEY")57MODEL = "gemini-3.1-pro-preview"5859# Icon styles with SVG-specific instructions60ICON_STYLES = {61"outlined": "outlined stroke icons, 2px stroke width, no fill, clean open paths",62"filled": "solid filled icons, no stroke, flat color fills, bold shapes",63"duotone": "duotone style with primary color at full opacity and secondary color at 30% opacity, layered shapes",64"thin": "thin line icons, 1px or 1.5px stroke width, delicate minimalist lines",65"bold": "bold thick line icons, 3px stroke width, heavy weight, impactful",66"rounded": "rounded icons with round line caps and joins, soft corners, friendly feel",67"sharp": "sharp angular icons, square line caps and mitered joins, precise edges",68"flat": "flat design icons, solid fills, no gradients or shadows, geometric simplicity",69"gradient": "linear or radial gradient fills, modern vibrant color transitions",70"glassmorphism": "glassmorphism style with semi-transparent fills, blur backdrop effect simulation, frosted glass",71"pixel": "pixel art style icons on a grid, retro 8-bit aesthetic, crisp edges",72"hand-drawn": "hand-drawn sketch style, slightly irregular strokes, organic feel, imperfect lines",73"isometric": "isometric 3D projection, 30-degree angles, dimensional depth",74"glyph": "simple glyph style, single solid shape, minimal detail, pictogram",75"animated-ready": "animated-ready SVG with named groups and IDs for CSS/JS animation targets",76}7778ICON_CATEGORIES = {79"navigation": "arrows, menus, hamburger, chevrons, home, back, forward, breadcrumb",80"action": "edit, delete, save, download, upload, share, copy, paste, print, search",81"communication": "email, chat, phone, video call, notification, bell, message bubble",82"media": "play, pause, stop, skip, volume, microphone, camera, image, gallery",83"file": "document, folder, archive, attachment, cloud, database, storage",84"user": "person, group, avatar, profile, settings, lock, key, shield",85"commerce": "cart, bag, wallet, credit card, receipt, tag, gift, store",86"data": "chart, graph, analytics, dashboard, table, filter, sort, calendar",87"development": "code, terminal, bug, git, API, server, database, deploy",88"social": "heart, star, thumbs up, bookmark, flag, trophy, badge, crown",89"weather": "sun, moon, cloud, rain, snow, wind, thunder, temperature",90"map": "pin, location, compass, globe, route, directions, map marker",91}9293# SVG generation prompt template94SVG_PROMPT_TEMPLATE = """Generate a clean, production-ready SVG icon.9596Requirements:97- Output ONLY valid SVG code, nothing else98- ViewBox: "0 0 {viewbox} {viewbox}"99- Use currentColor for strokes/fills (inherits CSS color)100- No embedded fonts or text elements unless specifically requested101- No raster images or external references102- Optimized paths with minimal nodes103- Accessible: include <title> element with icon description104{style_instructions}105{color_instructions}106{size_instructions}107108Icon to generate: {prompt}109110Output the SVG code only, wrapped in ```svg``` code block."""111112SVG_BATCH_PROMPT_TEMPLATE = """Generate {count} distinct SVG icon variations for: {prompt}113114Requirements for EACH icon:115- Output ONLY valid SVG code116- ViewBox: "0 0 {viewbox} {viewbox}"117- Use currentColor for strokes/fills (inherits CSS color)118- No embedded fonts, raster images, or external references119- Optimized paths with minimal nodes120- Include <title> element with icon description121{style_instructions}122{color_instructions}123124Generate {count} different visual interpretations. Output each SVG in a separate ```svg``` code block.125Label each variation (e.g., "Variation 1: [brief description]")."""126127128def extract_svgs(text):129"""Extract SVG code blocks from model response"""130svgs = []131132# Try ```svg code blocks first133pattern = r'```svg\s*\n(.*?)```'134matches = re.findall(pattern, text, re.DOTALL)135if matches:136svgs.extend(matches)137138# Fallback: try ```xml code blocks139if not svgs:140pattern = r'```xml\s*\n(.*?)```'141matches = re.findall(pattern, text, re.DOTALL)142svgs.extend(matches)143144# Fallback: try bare <svg> tags145if not svgs:146pattern = r'(<svg[^>]*>.*?</svg>)'147matches = re.findall(pattern, text, re.DOTALL)148svgs.extend(matches)149150# Clean up extracted SVGs151cleaned = []152for svg in svgs:153svg = svg.strip()154if not svg.startswith('<svg'):155# Try to find <svg> within the extracted text156match = re.search(r'(<svg[^>]*>.*?</svg>)', svg, re.DOTALL)157if match:158svg = match.group(1)159else:160continue161cleaned.append(svg)162163return cleaned164165166def apply_color(svg_code, color):167"""Replace currentColor with specific color if provided"""168if color:169# Replace currentColor with the specified color170svg_code = svg_code.replace('currentColor', color)171# If no currentColor was present, add fill/stroke color172if color not in svg_code:173svg_code = svg_code.replace('<svg', f'<svg color="{color}"', 1)174return svg_code175176177def apply_viewbox_size(svg_code, size):178"""Adjust SVG viewBox to target size"""179if size:180# Update width/height attributes if present181svg_code = re.sub(r'width="[^"]*"', f'width="{size}"', svg_code)182svg_code = re.sub(r'height="[^"]*"', f'height="{size}"', svg_code)183# Add width/height if not present184if 'width=' not in svg_code:185svg_code = svg_code.replace('<svg', f'<svg width="{size}" height="{size}"', 1)186return svg_code187188189def generate_icon(prompt, style=None, category=None, name=None,190color=None, size=24, output_path=None, viewbox=24):191"""Generate a single SVG icon using Gemini 3.1 Pro Preview"""192193if not GEMINI_API_KEY:194print("Error: GEMINI_API_KEY not set")195print("Set it with: export GEMINI_API_KEY='your-key'")196return None197198client = genai.Client(api_key=GEMINI_API_KEY)199200# Build style instructions201style_instructions = ""202if style and style in ICON_STYLES:203style_instructions = f"- Style: {ICON_STYLES[style]}"204205# Build color instructions206color_instructions = "- Use currentColor for all strokes and fills"207if color:208color_instructions = f"- Use color: {color} for primary elements, currentColor for secondary"209210# Build size instructions211size_instructions = f"- Design for {size}px display size, optimize detail level accordingly"212213# Build final prompt214icon_prompt = prompt215if category and category in ICON_CATEGORIES:216icon_prompt = f"{prompt} (category: {ICON_CATEGORIES[category]})"217if name:218icon_prompt = f"'{name}' icon: {icon_prompt}"219220full_prompt = SVG_PROMPT_TEMPLATE.format(221prompt=icon_prompt,222viewbox=viewbox,223style_instructions=style_instructions,224color_instructions=color_instructions,225size_instructions=size_instructions226)227228print(f"Generating icon with {MODEL}...")229print(f"Prompt: {prompt}")230if style:231print(f"Style: {style}")232print()233234try:235response = client.models.generate_content(236model=MODEL,237contents=full_prompt,238config=types.GenerateContentConfig(239temperature=0.7,240max_output_tokens=4096,241)242)243244# Extract SVG from response245response_text = response.text if hasattr(response, 'text') else ""246if not response_text:247for part in response.candidates[0].content.parts:248if hasattr(part, 'text') and part.text:249response_text += part.text250251svgs = extract_svgs(response_text)252253if not svgs:254print("No valid SVG generated. Model response:")255print(response_text[:500])256return None257258svg_code = svgs[0]259260# Apply color if specified261svg_code = apply_color(svg_code, color)262263# Apply size264svg_code = apply_viewbox_size(svg_code, size)265266# Determine output path267if output_path is None:268timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")269slug = name or prompt.split()[0] if prompt else "icon"270slug = re.sub(r'[^a-zA-Z0-9_-]', '_', slug.lower())271style_suffix = f"_{style}" if style else ""272output_path = f"{slug}{style_suffix}_{timestamp}.svg"273274# Save SVG275with open(output_path, "w", encoding="utf-8") as f:276f.write(svg_code)277278print(f"Icon saved to: {output_path}")279return output_path280281except Exception as e:282print(f"Error generating icon: {e}")283return None284285286def generate_batch(prompt, count, output_dir, style=None, color=None,287viewbox=24, name=None):288"""Generate multiple icon variations"""289290if not GEMINI_API_KEY:291print("Error: GEMINI_API_KEY not set")292return []293294client = genai.Client(api_key=GEMINI_API_KEY)295os.makedirs(output_dir, exist_ok=True)296297# Build instructions298style_instructions = ""299if style and style in ICON_STYLES:300style_instructions = f"- Style: {ICON_STYLES[style]}"301302color_instructions = "- Use currentColor for all strokes and fills"303if color:304color_instructions = f"- Use color: {color} for primary elements"305306full_prompt = SVG_BATCH_PROMPT_TEMPLATE.format(307prompt=prompt,308count=count,309viewbox=viewbox,310style_instructions=style_instructions,311color_instructions=color_instructions312)313314print(f"\n{'='*60}")315print(f" BATCH ICON GENERATION")316print(f" Model: {MODEL}")317print(f" Prompt: {prompt}")318print(f" Variants: {count}")319print(f" Output: {output_dir}")320print(f"{'='*60}\n")321322try:323response = client.models.generate_content(324model=MODEL,325contents=full_prompt,326config=types.GenerateContentConfig(327temperature=0.9,328max_output_tokens=16384,329)330)331332response_text = response.text if hasattr(response, 'text') else ""333if not response_text:334for part in response.candidates[0].content.parts:335if hasattr(part, 'text') and part.text:336response_text += part.text337338svgs = extract_svgs(response_text)339340if not svgs:341print("No valid SVGs generated.")342print(response_text[:500])343return []344345results = []346slug = name or re.sub(r'[^a-zA-Z0-9_-]', '_', prompt.split()[0].lower())347style_suffix = f"_{style}" if style else ""348349for i, svg_code in enumerate(svgs[:count]):350svg_code = apply_color(svg_code, color)351filename = f"{slug}{style_suffix}_{i+1:02d}.svg"352filepath = os.path.join(output_dir, filename)353354with open(filepath, "w", encoding="utf-8") as f:355f.write(svg_code)356357results.append(filepath)358print(f" [{i+1}/{len(svgs[:count])}] Saved: {filename}")359360print(f"\n{'='*60}")361print(f" BATCH COMPLETE: {len(results)}/{count} icons generated")362print(f"{'='*60}\n")363364return results365366except Exception as e:367print(f"Error generating icons: {e}")368return []369370371def generate_sizes(prompt, sizes, style=None, color=None, output_dir=None, name=None):372"""Generate same icon at multiple sizes"""373if output_dir is None:374output_dir = "."375os.makedirs(output_dir, exist_ok=True)376377results = []378slug = name or re.sub(r'[^a-zA-Z0-9_-]', '_', prompt.split()[0].lower())379style_suffix = f"_{style}" if style else ""380381for size in sizes:382print(f"Generating {size}px variant...")383filename = f"{slug}{style_suffix}_{size}px.svg"384filepath = os.path.join(output_dir, filename)385386result = generate_icon(387prompt=prompt,388style=style,389color=color,390size=size,391output_path=filepath,392viewbox=size393)394395if result:396results.append(result)397398time.sleep(1)399400return results401402403def main():404parser = argparse.ArgumentParser(405description="Generate SVG icons using Gemini 3.1 Pro Preview"406)407parser.add_argument("--prompt", "-p", type=str, help="Icon description")408parser.add_argument("--name", "-n", type=str, help="Icon name (for filename)")409parser.add_argument("--style", "-s", choices=list(ICON_STYLES.keys()),410help="Icon style")411parser.add_argument("--category", "-c", choices=list(ICON_CATEGORIES.keys()),412help="Icon category for context")413parser.add_argument("--color", type=str,414help="Primary color (hex, e.g. #6366F1). Default: currentColor")415parser.add_argument("--size", type=int, default=24,416help="Icon size in px (default: 24)")417parser.add_argument("--viewbox", type=int, default=24,418help="SVG viewBox size (default: 24)")419parser.add_argument("--output", "-o", type=str, help="Output file path")420parser.add_argument("--output-dir", type=str, help="Output directory for batch")421parser.add_argument("--batch", type=int,422help="Number of icon variants to generate")423parser.add_argument("--sizes", type=str,424help="Comma-separated sizes (e.g. '16,24,32,48')")425parser.add_argument("--list-styles", action="store_true",426help="List available icon styles")427parser.add_argument("--list-categories", action="store_true",428help="List available icon categories")429430args = parser.parse_args()431432if args.list_styles:433print("Available icon styles:")434for style, desc in ICON_STYLES.items():435print(f" {style}: {desc[:70]}...")436return437438if args.list_categories:439print("Available icon categories:")440for cat, desc in ICON_CATEGORIES.items():441print(f" {cat}: {desc}")442return443444if not args.prompt and not args.name:445parser.error("Either --prompt or --name is required")446447prompt = args.prompt or args.name448449# Multi-size mode450if args.sizes:451sizes = [int(s.strip()) for s in args.sizes.split(",")]452generate_sizes(453prompt=prompt,454sizes=sizes,455style=args.style,456color=args.color,457output_dir=args.output_dir or "./icons",458name=args.name459)460# Batch mode461elif args.batch:462output_dir = args.output_dir or "./icons"463generate_batch(464prompt=prompt,465count=args.batch,466output_dir=output_dir,467style=args.style,468color=args.color,469viewbox=args.viewbox,470name=args.name471)472# Single icon473else:474generate_icon(475prompt=prompt,476style=args.style,477category=args.category,478name=args.name,479color=args.color,480size=args.size,481output_path=args.output,482viewbox=args.viewbox483)484485486if __name__ == "__main__":487main()488