@moriware/rn-make-icon

@moriware/rn-make-icon

Gerador de ícones para Android e iOS focado em projetos React Native

⚡️ Quick Start

Você pode executar o gerador de ícones com o comando npx (disponível a partir do Node.js 8.2.0).

$ npx @moriware/rn-make-icon gerar ./caminho/para/icon.png

Para versões anteriores do Node, consulte a seção 🚀 Instalação.

🚀 Installation

Requisito de versão do Node @moriware/rn-make-icon exige Node.js 14.0 ou superior (v16+ recomendado). Use gerenciadores como n, nvm ou nvm-windows para alternar versões rapidamente.

$ npx @moriware/rn-make-icon gerar ./caminho/para/icon.png

Para versões anteriores do Node, consulte a seção 🚀 Instalação.

🚀 Installation

Requisito de versão do Node

@moriware/rn-make-icon exige Node.js 14.0 ou superior (v16+ recomendado). Use gerenciadores como n, nvm ou nvm-windows para alternar versões rapidamente.

Global

Para instalar o pacote globalmente, execute um dos comandos abaixo (talvez seja necessário sudo/admin caso o Node não tenha sido instalado via n/nvm):

$ npm install -g @moriware/rn-make-icon
# OU
$ yarn global add @moriware/rn-make-icon

Para instalar o pacote globalmente, execute um dos comandos abaixo (talvez seja necessário sudo/admin caso o Node não tenha sido instalado via n/nvm):

$ npm install -g @moriware/rn-make-icon
# OU
$ yarn global add @moriware/rn-make-icon

Após a instalação, o binário rn-make-icon ficará disponível no terminal. Teste executando rn-make-icon para visualizar o menu de ajuda.

Confira a versão instalada com:

$ rn-make-icon --version

Instalação local

Para instalar o rn-make-icon como dependência do seu projeto, use:

$ npm install @moriware/rn-make-icon -D
# OU
$ yarn add @moriware/rn-make-icon -D

🧪 Uso

Para gerar os ícones você precisa de:

• Um PNG para iOS e Android (idealmente 1024x1024). Veja alguns exemplos na pasta example.
• (Opcional) Imagens para Adaptive Icon no Android: um foreground e um background (cor ou imagem). Saiba mais na documentação oficial ou neste artigo sobre design de adaptive icons.

A forma mais simples de usar o rn-make-icon é chamar o comando rn-make-icon gerar apontando para o arquivo:

$ rn-make-icon gerar ./icon.png

Se instalou como dependência de desenvolvimento, adicione um script no package.json e execute com npm run create-appicon:

{
  scripts: {
    'create-appicon': 'rn-make-icon gerar ./icon.png',
  },
}

O utilitário gera automaticamente os ícones nas dimensões corretas para Android e iOS.

⚙️ Configuração

Existem duas formas principais de configurar o rn-make-icon:

• Parâmetros da CLI — ajuste as opções diretamente na linha de comando.
• Arquivos de configuração — defina um arquivo JavaScript/JSON ou uma chave no package.json com as opções desejadas.

Parâmetros da CLI

Liste todas as opções disponíveis executando rn-make-icon <comando> --help. Exemplo:

$ rn-make-icon gerar --help

Uso: rn-make-icon gerar [opções] [caminho-imagem]

Gera um novo conjunto de ícones para um projeto React Native

Opções:
  -d, --disable-launcher-icon                  Impede a troca do ícone principal no iOS e Android
  -A, --android [nome-icone]                   Gera o conjunto de ícones apenas para Android
  -IPA, --image-path-android                   Caminho da imagem para Android
  --flavor [flavor]                            Nome do flavor Android
  -b, --adaptive-icon-background <background>  Cor ou imagem usada no fundo do ícone adaptativo
  -f, --adaptive-icon-foreground <foreground>  Imagem usada como primeiro plano do ícone adaptativo
  -I, --ios                                    Gera o conjunto de ícones apenas para iOS
  --group <group>                              Grupo do projeto iOS
  -IPI, --image-path-ios                       Caminho da imagem para iOS
  -h, --help                                   Exibe este resumo de ajuda

Arquivos de configuração

O @moriware/rn-make-icon reconhece os seguintes arquivos na raiz do projeto:

• .rnmakeiconrc.js
• .rnmakeiconrc.json
• package.json (propriedade rnMakeIconConfig)

Se mais de um arquivo estiver presente, a ordem de prioridade acima é respeitada. Ainda oferecemos suporte retrocompatível às variantes antigas .iconsetrc.* e à chave iconsetConfig.

Exemplo de configuração em JavaScript:

// .rnmakeiconrc.js
module.exports = {
  imagePath: './assets/icon.png',

  adaptiveIconBackground: './assets/icon-background.png',
  adaptiveIconForeground: './assets/icon-foreground.png',
};

rn-make-icon gerar

• imagePath — Caminho do arquivo de imagem que servirá como ícone principal (ex.: ./assets/icon.png).

• disableLauncherIcon — Gera apenas os ícones sem atualizar os manifests.

• android / ios — Defina true/false para habilitar ou desabilitar a geração por plataforma, ou informe o nome do novo ícone (por exemplo ic_novo_app).

• imagePathAndroid — Caminho de uma imagem específica para Android (opcional; caso ausente, utiliza imagePath).

• imagePathIos — Caminho de uma imagem específica para iOS (opcional; caso ausente, utiliza imagePath).

As opções abaixo são utilizadas apenas durante a geração de ícones adaptativos no Android:

• adaptiveIconBackground — Cor (ex.: "#ffffff") ou imagem (ex.: "assets/images/fundo-claro.png") aplicada como fundo do ícone adaptativo.
• adaptiveIconForeground — Imagem utilizada como camada frontal do ícone adaptativo.