Generador de Iconos iOS
Genera conjuntos de imágenes PNG para catálogos de activos de Xcode a partir de 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 provisionales con activos de calidad de producción
- Igualando 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 | 5,000+ símbolos Apple | Solo macOS | Estilo nativo Apple, uso sin conexión |
2. Siempre iguala el estilo existente
Antes de generar, revisa los iconos existentes del proyecto para mantener coherencia en tamaño, color y peso.
3. Estructura de salida
Ambos métodos producen un conjunto de imágenes completo para Xcode:
<dir-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:
# Comprueba las dimensiones de un icono existente
sips -g pixelWidth -g pixelHeight ruta/a/[email protected]
Paso 2: Buscar iconos
API Iconify (recomendado 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 de 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 verificar visualmente
- Copia 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 reconoce 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 todo: 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 el mejor
- Igualar el estilo del proyecto existente -- verifica dimensiones, color y peso de los 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 coherencia Apple -- se integran perfectamente con la UI del sistema
- Generar directamente en el catálogo de activos -- usa
--output ./Assets.xcassets/iconspara evitar copias manuales - Verificar visualmente -- siempre previsualiza el PNG @2x antes de hacer commit
Antipatrones
- Generar iconos sin verificar el estilo de iconos existente del proyecto
- Usar colores predeterminados cuando el proyecto tiene una paleta de colores definida
- Generar con tamaños incorrectos (verifica primero los iconos existentes)
- Hacer commit de iconos generados sin verificación visual