>_ DevTrendspt

Idioma

Início

Linguagens

Seções

Frontend Backend Mobile DevOps AI / ML GameDev Blockchain Embarcados Segurança
TypeScript

Como criar rapidamente um ícone decente para um projeto pessoal sem Figma e sem designer

Soa familiar: você acabou de polir seu MVP, escreveu testes, configurou o build, e então o projeto precisa de um ícone. Abrir o Figma pesado só para um simples badge com gradiente e glifo parece esforço demais. Desenhar às cegas no código ou procurar conversores online duvidosos cheios de anúncios também não é exatamente atraente.

Recentemente encontrei o repositório AppIcon Forge. É uma ferramenta web open-source leve, construída especificamente para momentos como este. Ela cuida de todo o trabalho tedioso de layout de ícones quadrados e arredondados para aplicações mobile e desktop.

example1

O que o gerador pode fazer

A ideia central é simples: oferecer aos desenvolvedores uma interface limpa com sliders e visualização instantânea, sem a complexidade de ferramentas de gráficos vetoriais.

Aqui estão alguns exemplos do que você pode montar em poucos cliques:

example2 example3 example4 example5

Detalhando os recursos, o serviço cobre todas as necessidades básicas:

  • Integração com o catálogo Iconify. A interface inclui busca em um enorme banco de dados de ícones vetoriais com mais de 200.000 símbolos. Digite uma palavra-chave, escolha um glifo, e visualize instantaneamente no fundo.
  • Suporte a texto e tipografia. Você pode criar um logo com uma ou duas letras, ajustar a fonte, espaçamento entre letras e aplicar gradientes no texto.
  • Upload dos seus próprios assets. Se os ícones padrão não servem, você pode inserir um SVG local ou imagem raster.
  • Personalização do estilo do fundo. Suporta gradientes lineares e radiais, sombras com desfoque, largura e cor da borda, e arredondamento dos cantos.

Aliás, o autor do projeto deixou um aviso útil no README sobre fontes. Se você gerar um ícone baseado em texto, o app pode usar as fontes do sistema do seu SO por padrão. Para lançamentos comerciais, é melhor trocar para Google Fonts abertas para evitar problemas de licenciamento.

Como executar o projeto

A opção mais simples é abrir a versão pronta no GitHub Pages e começar a criar seu asset imediatamente. Sem necessidade de instalação.

Se você prefere manter utilitários assim localmente ou quer fazer deploy de uma cópia dentro de uma rede fechada, o projeto sobe em apenas alguns comandos.

Executando com pnpm

Para desenvolvimento local com TypeScript e Vite:

# Клонируем репозиторий
git clone https://github.com/zhangyu1818/appicon-forge.git

# Переходим в папку проекта
cd appicon-forge

# Ставим зависимости
pnpm install

# Запускаем локальный dev-сервер
pnpm dev

Depois disso, a interface estará disponível no seu navegador em http://localhost:5173/appicon-forge/.

Executando no Docker

Se você não quer lidar com Node.js e gerenciadores de pacotes, existe um Dockerfile pronto:

git clone https://github.com/zhangyu1818/appicon-forge.git
cd appicon-forge

# Собираем и запускаем контейнер
docker build -t appicon-forge .
docker run -d --name=appicon-forge --restart=always -p 5173:80 appicon-forge

Ou via Docker Compose, se você já tem infraestrutura de serviços domésticos configurada:

docker-compose up -d

Para quais tarefas é útil

Claro, essa ferramenta não vai substituir o trabalho de um designer gráfico em branding complexo. Mas para tarefas diárias de desenvolvedor, é mais do que suficiente:

  • Protótipos rápidos e projetos pessoais que precisam de um placeholder elegante em vez de um quadrado branco padrão.
  • Utilitários corporativos internos e painéis de administração onde a velocidade de lançamento importa mais do que um estilo único.
  • Criação de favicons para sites ou ícones para manifestos PWA.
  • Estilização de extensões de navegador.

O projeto é distribuído sob a licença MIT permissiva. O código é limpo e compacto, então se você quiser, pode fazer um fork do repositório e adicionar seus próprios templates de grid ou formatos de exportação específicos para iOS e Android.

Projetos relacionados