¿Qué hace Generador de Iconos iOS?
Genera conjuntos de imágenes PNG para catálogos de activos Xcode desde dos fuentes.
Cuándo Activarlo
- Generando activos de iconos para un proyecto Xcode iOS/macOS
- Buscando iconos en colecciones de código abierto
- Creando conjuntos de imágenes PNG (1x, 2x, 3x) para catálogos de activos
- Reemplazando iconos placeholder con activos de calidad de producción
- Emparejando estilos de iconos existentes en un proyecto Xcode
Principios Fundamentales
1. Dos Fuentes, un Formato de Salida
Ambas fuentes producen conjuntos de imágenes idénticos y compatibles con Xcode. Elige según la necesidad:
| Fuente | Iconos | Requiere | Mejor para |
|---|---|---|---|
| API Iconify | 275 000+ de 200+ colecciones | Internet | Amplia selección, estilos específicos, iconos de código abierto |
| SF Symbols | 5000+ símbolos Apple | solo macOS | Estilo nativo Apple, uso sin conexión |
2. Siempre Emparejar el Estilo Existente
Antes de generar, verifica el tamaño, color y peso de los iconos existentes del proyecto para mantener consistencia.
3. Estructura de Salida
Ambos métodos producen un conjunto de imágenes completo para Xcode:
<directorio-salida>/<nombre-activo>.imageset/
Contents.json
<nombre-activo>.png # 1x (68px por defecto)
<nombre-activo>@2x.png # 2x (136px por defecto)
<nombre-activo>@3x.png # 3x (204px por defecto)
Ejemplos
Paso 1: Evaluar Requisitos
Determina las necesidades del icono: qué representa, estilo preferido, color objetivo y tamaño.
Si el proyecto ya tiene iconos, verifica el estilo existente:
# Ver las dimensiones de un icono existente
sips -g pixelWidth -g pixelHeight ruta/al/[email protected]
Paso 2: Buscar Iconos
API Iconify (recomendada para amplia selección):
# Buscar en todas las colecciones
$SKILL_DIR/scripts/iconify_gen.sh search "recibo"
# Buscar dentro de una colección específica
$SKILL_DIR/scripts/iconify_gen.sh search "tarjeta de visita" --prefix mdi
# Listar colecciones disponibles
$SKILL_DIR/scripts/iconify_gen.sh collections
SF Symbols (para estilo nativo Apple): Explora la aplicación SF Symbols o consulta nombres comunes:
| Caso de Uso | Nombre del Símbolo |
|---|---|
| Documento | doc.text, doc.fill |
| Recibo | doc.text.below.ecg, receipt |
| Persona | person.crop.rectangle, person.text.rectangle |
| Cámara | camera, camera.fill |
| Escanear | doc.viewfinder, qrcode.viewfinder |
| Ajustes | gearshape, slider.horizontal.3 |
Paso 3: Vista Previa (Opcional)
# Vista previa Iconify
$SKILL_DIR/scripts/iconify_gen.sh preview mdi:receipt-text-outline
Paso 4: Generar
API Iconify:
# Generación básica
$SKILL_DIR/scripts/iconify_gen.sh mdi:receipt-text-outline editTool_expenseReport
# Color y ubicación de salida personalizados
$SKILL_DIR/scripts/iconify_gen.sh mdi:receipt-text-outline myIcon --color 007AFF --output ./Assets.xcassets/icons
Opciones: --size <pt> (por defecto: 68), --color <hex> (por defecto: 8E8E93), --output <dir> (por defecto: /tmp/icons)
SF Symbols:
# Generación básica
swift $SKILL_DIR/scripts/generate_icons.swift doc.text.below.ecg editTool_expenseReport
# Color, peso y salida personalizados
swift $SKILL_DIR/scripts/generate_icons.swift person.crop.rectangle myIcon --color 007AFF --weight regular --output ./Assets.xcassets/icons
Opciones: --size <pt> (por defecto: 68), --color <hex> (por defecto: 8E8E93), --weight <nombre> (por defecto: thin), --output <dir> (por defecto: /tmp/icons)
Paso 5: Verificar e Integrar
- Lee el PNG @2x generado para verificarlo visualmente
- Cópialo al catálogo de activos si no se generó directamente allí:
cp -r /tmp/icons/<nombre>.imageset ruta/a/Assets.xcassets/<grupo>/ - Compila el proyecto para verificar que Xcode detecta los nuevos activos
Colecciones Populares de Iconify
| Prefijo | Nombre | Cantidad | Estilo |
|---|---|---|---|
mdi | Material Design Icons | 7400+ | Variantes relleno + contorno |
ph | Phosphor | 9000+ | 6 pesos por icono |
solar | Solar | 7400+ | Negrita, lineal, contorno |
tabler | Tabler Icons | 6000+ | Grosor de trazo consistente |
lucide | Lucide | 1700+ | Limpio, minimalista |
ri | Remix Icon | 3100+ | Variantes relleno + línea |
carbon | Carbon | 2400+ | Lenguaje de diseño IBM |
heroicons | HeroIcons | 1200+ | Complemento de Tailwind CSS |
Explora todos: https://icon-sets.iconify.design/
Referencia de Scripts
| Script | Fuente | Ruta |
|---|---|---|
iconify_gen.sh | API Iconify (275k+ iconos) | $SKILL_DIR/scripts/iconify_gen.sh |
generate_icons.swift | SF Symbols (5k+ iconos) | $SKILL_DIR/scripts/generate_icons.swift |
Mejores Prácticas
- Buscar antes de generar -- explora los iconos disponibles para encontrar la mejor coincidencia
- Emparejar el estilo del proyecto existente -- verifica dimensiones, color y peso de iconos existentes antes de generar nuevos
- Usar Iconify para variedad -- más de 200 colecciones significa que puedes encontrar el estilo exacto que necesitas
- Usar SF Symbols para consistencia Apple -- coinciden perfectamente con la UI del sistema
- Generar directamente al catálogo de activos -- usa
--output ./Assets.xcassets/iconspara evitar copias manuales - Verificar visualmente -- siempre previsualiza el PNG @2x antes de confirmar cambios
Anti-Patrones
- Generar iconos sin verificar el estilo de icono existente del proyecto
- Usar colores por defecto cuando el proyecto tiene una paleta de colores definida
- Generar en tamaños incorrectos (verifica primero los iconos existentes)
- Confirmar iconos generados sin verificación visual