Gerador de Ícones iOS

Gere imagens PNG de conjuntos de ícones para catálogos de assets do Xcode a partir de duas fontes.

Quando Ativar

• Gerando assets de ícones para um projeto Xcode iOS/macOS
• Procurando ícones em coleções de código aberto
• Criando conjuntos de imagens PNG (1x, 2x, 3x) para catálogos de assets
• Substituindo ícones de 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 compatíveis com o Xcode. Escolha com base na necessidade:

2. Sempre Combine o Estilo Existente

Antes de gerar, verifique os ícones existentes do projeto quanto à consistência de tamanho, cor e espessura.

3. Estrutura de Saída

Ambos os métodos produzem um conjunto de imagens completo para o Xcode:

<output-dir>/<asset-name>.imageset/
  Contents.json
  <asset-name>.png        # 1x (68px default)
  <asset-name>@2x.png     # 2x (136px default)
  <asset-name>@3x.png     # 3x (204px default)

Exemplos

Passo 1: Avalie os Requisitos

Determine as necessidades de ícones: o que o ícone representa, estilo preferido, cor alvo e tamanho.

Se o projeto já possui ícones, verifique o estilo existente:

# Check dimensions of existing icon
sips -g pixelWidth -g pixelHeight path/to/existing@2x.png

Passo 2: Procure por Ícones

API Iconify (recomendado para ampla seleção):

# Search all collections
$SKILL_DIR/scripts/iconify_gen.sh search "receipt"

# Search within a specific collection
$SKILL_DIR/scripts/iconify_gen.sh search "business card" --prefix mdi

# List available collections
$SKILL_DIR/scripts/iconify_gen.sh collections

SF Symbols (para estilo nativo da Apple): Navegue pelo aplicativo SF Symbols ou consulte nomes comuns:

Passo 3: Pré-visualize (Opcional)

# Iconify preview
$SKILL_DIR/scripts/iconify_gen.sh preview mdi:receipt-text-outline

Passo 4: Gere

API Iconify:

# Basic generation
$SKILL_DIR/scripts/iconify_gen.sh mdi:receipt-text-outline editTool_expenseReport

# Custom color and output location
$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:

# Basic generation
swift $SKILL_DIR/scripts/generate_icons.swift doc.text.below.ecg editTool_expenseReport

# Custom color, weight, and output
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 <name> (padrão: thin), --output <dir> (padrão: /tmp/icons)

Passo 5: Verifique e Integre

1. Leia o arquivo PNG @2x gerado para verificar visualmente
2. Copie para o catálogo de assets se não for gerado diretamente lá:

   cp -r /tmp/icons/<name>.imageset path/to/Assets.xcassets/<group>/
   

3. Compile o projeto para verificar se o Xcode reconhece os novos assets

Coleções Populares da Iconify

Navegue por todos: https://icon-sets.iconify.design/

Referência de Scripts

Melhores Práticas

…