Loading...
Com Rocketicons, você procura entre milhares de ícones open source e adiciona apenas os componentes que seu projeto usa. A CLI grava esses arquivos no seu código: sua aplicação não importa uma coleção inteira nem depende de tree-shaking para fazer os ícones não usados sumirem.
A CLI atual espera um projeto TypeScript existente, em React ou React Native, com um arquivo tsconfig.json. Execute os comandos na raiz desse projeto.
A inicialização cria:
Ela também adiciona o alias @/ri/* ao tsconfig.json e instala @rocketicons/utils e @rocketicons/tailwind pelo npm. Essas são pequenas dependências compartilhadas usadas pelos componentes gerados e pela integração com Tailwind.
Em um projeto web com Tailwind CSS 4, a inicialização encontra o arquivo CSS ativo com @import "tailwindcss" e adiciona automaticamente o plugin do Rocketicons:
Execute npx rocketicons doctor --json para conferir a versão do Tailwind, o carregamento do CSS, o registro do plugin e a integração com Vite ou PostCSS. Se houver mais de um arquivo CSS ativo com Tailwind, passe --stylesheet-path src/caminho/estilos.css ao comando init. O dry run mostra qual arquivo CSS será alterado antes da escrita.
Use o explorador de ícones para escolher uma coleção e o ID exato. Por exemplo, o foguete do próprio Rocketicons é @rc/rc-rocket-icon.
A CLI grava src/ri/icons/rc-rocket-icon.tsx. Importe o componente do seu próprio código:
Esse é o plano de voo completo: encontre, adicione e importe. Continue em Adicionando Ícones para ver instalações repetidas e verificação, ou abra os guias rápidos por framework.
O build da CLI no repositório gera TSX ou JSX no diretório fixo
src/ri, aceita vários ícones exatos por comando e detecta o gerenciador de pacotes do projeto. Use--dry-rune--jsonpara conferir as alterações. Esses novos comandos aguardam a próxima publicação no npm.
Versão do catálogo: 0.4.0 · Conteúdo atualizado: 2026-08-12