O que Gerador de Ícones iOS faz?
Gera conjuntos de imagens PNG para catálogos de assets Xcode a partir de duas fontes.
Quando Ativar
- Gerando assets de ícones para um projeto Xcode iOS/macOS
- Pesquisando ícones em coleções open source
- Criando conjuntos de imagens PNG (1x, 2x, 3x) para catálogos de assets
- Substituindo ícones placeholder por assets de qualidade de produção
- Combinando 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 conforme a necessidade:
| Fonte | Ícones | Requer | Melhor para |
|---|---|---|---|
| API Iconify | 275.000+ de 200+ coleções | Internet | Grande seleção, estilos específicos, ícones open source |
| 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 para consistência de tamanho, cor e peso.
3. Estrutura de Saída
Ambos os métodos produzem um conjunto de imagens Xcode completo:
<dir-saida>/<nome-asset>.imageset/
Contents.json
<nome-asset>.png # 1x (68px padrão)
<nome-asset>@2x.png # 2x (136px padrão)
<nome-asset>@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á tiver ícones, verifique o estilo existente:
# Verifique dimensões de um ícone existente
sips -g pixelWidth -g pixelHeight caminho/para/[email protected]
Passo 2: Pesquisar Ícones
API Iconify (recomendado para ampla seleção):
# Pesquisar em todas as coleções
$SKILL_DIR/scripts/iconify_gen.sh search "recibo"
# Pesquisar em 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 no app 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 |
| Escanear | 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 meuIcone --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 meuIcone --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 assets, se não foi gerado diretamente lá:
cp -r /tmp/icons/<nome>.imageset caminho/para/Assets.xcassets/<grupo>/ - Compile o projeto para verificar se o Xcode reconhece os novos assets
Coleções Iconify Populares
| Prefixo | Nome | Quantidade | Estilo |
|---|---|---|---|
mdi | Material Design Icons | 7400+ | Variantes preenchidas + 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 preenchidas + linha |
carbon | Carbon | 2400+ | Linguagem de design IBM |
heroicons | HeroIcons | 1200+ | Companheiro do Tailwind CSS |
Navegue todos: 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 o melhor
- Corresponda ao estilo do projeto existente -- verifique dimensões, cor e peso dos ícones existentes antes de gerar novos
- Use Iconify para variedade -- 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 interface do sistema
- Gere diretamente para o catálogo de assets -- use
--output ./Assets.xcassets/iconspara evitar cópia manual - Verifique visualmente -- sempre pré-visualize o PNG @2x antes de comitar
Anti-Padrões
- Gerar ícones sem verificar o estilo de ícone existente no projeto
- Usar cores padrão quando o projeto possui uma paleta de cores definida
- Gerar em tamanhos errados (verifique os ícones existentes primeiro)
- Comitar ícones gerados sem verificação visual