Gerador de Ícones iOS
Gere conjuntos de imagens PNG para catálogos de ativos do Xcode a partir de duas fontes.
Quando Ativar
- Gerando ativos de ícones para um projeto Xcode iOS/macOS
- Pesquisando ícones em coleções de código aberto
- Criando conjuntos de imagens PNG (1x, 2x, 3x) para catálogos de ativos
- Substituindo placeholders por ativos de qualidade de produção
- Correspondendo estilos de ícones existentes em um projeto Xcode
Princípios Fundamentais
1. Duas Fontes, Um Formato de Saída
Ambas as fontes produzem conjuntos de imagens idênticos e compatíveis com Xcode. Escolha com base na necessidade:
| Fonte | Ícones | Requer | Melhor para |
|---|---|---|---|
| API Iconify | 275.000+ de 200+ coleções | Internet | Ampla seleção, estilos específicos, ícones de código aberto |
| SF Symbols | 5.000+ símbolos Apple | macOS apenas | Estilo nativo Apple, uso offline |
2. Sempre Corresponder ao Estilo Existente
Antes de gerar, verifique os ícones existentes do projeto quanto a tamanho, cor e peso para consistência.
3. Estrutura de Saída
Ambos os métodos produzem um conjunto de imagens completo para Xcode:
<diretorio-saida>/<nome-ativo>.imageset/
Contents.json
<nome-ativo>.png # 1x (68px padrão)
<nome-ativo>@2x.png # 2x (136px padrão)
<nome-ativo>@3x.png # 3x (204px padrão)
Exemplos
Passo 1: Avaliar Requisitos
Determine as necessidades do ícone: o que ele representa, estilo preferido, cor alvo e tamanho.
Se o projeto já possui ícones, verifique o estilo existente:
# Verificar dimensões de ícone existente
sips -g pixelWidth -g pixelHeight caminho/para/[email protected]
Passo 2: Pesquisar Ícones
API Iconify (recomendada para ampla seleção):
# Pesquisar em todas as coleções
$SKILL_DIR/scripts/iconify_gen.sh search "recibo"
# Pesquisar dentro de uma coleção específica
$SKILL_DIR/scripts/iconify_gen.sh search "cartão de visita" --prefix mdi
# Listar coleções disponíveis
$SKILL_DIR/scripts/iconify_gen.sh collections
SF Symbols (para estilo nativo Apple): Navegue pelo aplicativo SF Symbols ou consulte nomes comuns:
| Caso de Uso | Nome do Símbolo |
|---|---|
| Documento | doc.text, doc.fill |
| Recibo | doc.text.below.ecg, receipt |
| Pessoa | person.crop.rectangle, person.text.rectangle |
| Câmera | camera, camera.fill |
| Escaneamento | doc.viewfinder, qrcode.viewfinder |
| Configurações | gearshape, slider.horizontal.3 |
Passo 3: Pré-visualizar (Opcional)
# Pré-visualização Iconify
$SKILL_DIR/scripts/iconify_gen.sh preview mdi:receipt-text-outline
Passo 4: Gerar
API Iconify:
# Geração básica
$SKILL_DIR/scripts/iconify_gen.sh mdi:receipt-text-outline editTool_expenseReport
# Cor personalizada e local de saída
$SKILL_DIR/scripts/iconify_gen.sh mdi:receipt-text-outline myIcon --color 007AFF --output ./Assets.xcassets/icons
Opções: --size <pt> (padrão: 68), --color <hex> (padrão: 8E8E93), --output <dir> (padrão: /tmp/icons)
SF Symbols:
# Geração básica
swift $SKILL_DIR/scripts/generate_icons.swift doc.text.below.ecg editTool_expenseReport
# Cor, peso e saída personalizados
swift $SKILL_DIR/scripts/generate_icons.swift person.crop.rectangle myIcon --color 007AFF --weight regular --output ./Assets.xcassets/icons
Opções: --size <pt> (padrão: 68), --color <hex> (padrão: 8E8E93), --weight <nome> (padrão: thin), --output <dir> (padrão: /tmp/icons)
Passo 5: Verificar e Integrar
- Leia o PNG @2x gerado para verificar visualmente
- Copie para o catálogo de ativos, se não tiver saída diretamente:
cp -r /tmp/icons/<nome>.imageset caminho/para/Assets.xcassets/<grupo>/ - Compile o projeto para verificar se o Xcode reconhece os novos ativos
Coleções Populares do Iconify
| Prefixo | Nome | Quantidade | Estilo |
|---|---|---|---|
mdi | Material Design Icons | 7400+ | Variantes preenchido + contorno |
ph | Phosphor | 9000+ | 6 pesos por ícone |
solar | Solar | 7400+ | Negrito, linear, contorno |
tabler | Tabler Icons | 6000+ | Espessura de traço consistente |
lucide | Lucide | 1700+ | Limpo, minimalista |
ri | Remix Icon | 3100+ | Variantes preenchido + linha |
carbon | Carbon | 2400+ | Linguagem de design da IBM |
heroicons | HeroIcons | 1200+ | Companheiro do Tailwind CSS |
Navegue por todas: https://icon-sets.iconify.design/
Referência de Scripts
| Script | Fonte | Caminho |
|---|---|---|
iconify_gen.sh | API Iconify (275k+ ícones) | $SKILL_DIR/scripts/iconify_gen.sh |
generate_icons.swift | SF Symbols (5k+ ícones) | $SKILL_DIR/scripts/generate_icons.swift |
Melhores Práticas
- Pesquise antes de gerar — navegue pelos ícones disponíveis para encontrar a melhor correspondência
- Corresponda ao estilo existente do projeto — verifique dimensões, cor e peso dos ícones existentes antes de gerar novos
- Use Iconify para variedade — mais de 200 coleções significa que você pode encontrar o estilo exato que precisa
- Use SF Symbols para consistência Apple — eles combinam perfeitamente com a UI do sistema
- Gere diretamente no catálogo de ativos — use
--output ./Assets.xcassets/iconspara evitar cópia manual - Verifique visualmente — sempre pré-visualize o PNG @2x antes de commitar
Anti-Padrões
- Gerar ícones sem verificar o estilo de ícone existente no projeto
- Usar cores padrão quando o projeto tem uma paleta de cores definida
- Gerar em tamanhos errados (verifique os ícones existentes primeiro)
- Commitar ícones gerados sem verificação visual