Introdução

Primeiros Passos

Bem-vindo à documentação para rocketicons! Este componente fornece uma coleção de ícones para uso em seus projetos React web e React Native.

rocketicons utiliza classes do Tailwind CSS para estilização, tornando fácil a personalização e integração em suas aplicações.

Por que foi criado?

rocketicons foi criado para fornecer uma biblioteca de ícones simples e fácil de usar para desenvolvedores que desejam escrever um único código que possa funcionar tanto em React web quanto em React Native.

Fomos motivados pela existência de ótimas ferramentas como Tailwind CSS, Expo, NativeWind e React Icons.

Essas ferramentas são ótimas e nós as amamos, mas queríamos criar uma experiência ainda mais fácil para os desenvolvedores que trabalham com múltiplas plataformas com o mesmo código base.

Os ícones são projetados para serem facilmente personalizáveis e podem ser usados tanto em aplicações web quanto móveis.

Escreva uma vez, use em todos os lugares!

Instalação

Para instalar rocketicons, simplesmente execute o seguinte comando no seu terminal:

ou

ou

ou até mesmo

Boom!

Agora que você instalou rocketicons no seu projeto, você pode prosseguir para a configuração.

Configuração

Para usar rocketicons em seus projetos, você precisa ter uma configuração mínima.
Você precisa ter o tailwind em seu projeto e, é claro, o arquivo tailwind.config.js.

Nesse arquivo, importe o plugin e adicione-o ao array plugins assim:

Depois disso, você pode usar rocketicons em seu projeto.

Customização

rocketicons pode ser facilmente personalizado em cada uso usando classes do Tailwind para combinar com o design de sua aplicação.

Você também pode criar componentes React em seu projeto que estendem o componente padrão e adicionam seus estilos personalizados.

Novamente, sempre usando as classes do Tailwind .

Customização Global

Alterando o tema do rocketicons

Você pode definir uma personalização global para todos os ícones de duas maneiras:

1. Redefinindo o tema padrão

• Adicione um elemento components sob a seção theme do seu tailwind.config.js e um elemento icon abaixo do elemento components.

Assim:

• Dentro da propriedade icon, você deve definir todas as propriedades do nosso tema padrão como desejar.

Lembre-se, ao usar este método, você deve definir todas as propriedades e garantir que o tamanho padrão corresponda a um disponível, como mostrado acima.

O nosso tema padrão é assim:

2. Estendendo o tema padrão

Se o tema padrão estiver bom e você só quiser ajustar algumas propriedades ou adicionar novas variantes ou tamanhos, você pode simplesmente estender o tema padrão.

Você pode alterar o tamanho base, por exemplo:

E você pode até criar um novo tamanho assim:

Legal, né?

E você pode fazer isso para:

• default
• baseStyle
• variants
• sizes

Você não pode estender cores, já que elas não são definidas no tema padrão e nós apenas usamos aquelas fornecidas pelo Tailwind, que são MUITAS.

Contribuindo

Aqui está como você pode contribuir para o projeto:

1. Fork o repositório no GitHub.
2. Faça suas alterações.
3. Envie uma solicitação pull.

Relatório de Problemas

Se você encontrar um bug ou tiver um pedido de recurso, por favor, reporte-o na página de issues no GitHub.

Agora que você tem uma compreensão básica de como usar rocketicons, confira nosso Guia de Uso para aprender mais sobre como usar em seu projeto.