Icon Express

Este projeto é uma aplicação web desenvolvida em React que permite aos usuários personalizar ícones e fundos de acordo com suas preferências. Ele oferece uma interface intuitiva para ajustar o tamanho, rotação, cor e outras propriedades de ícones, além de permitir a personalização do fundo com arredondamento, preenchimento e cor. O projeto também inclui funcionalidades para salvar as configurações escolhidas no armazenamento local do navegador e exibir uma prévia do ícone selecionado antes de ser baixado.

Tecnologias Utilizadas ⚛

• React: Biblioteca JavaScript para construção de interfaces de usuário. 🚀
• Framer Motion: Biblioteca para animações suaves e interativas. 💫
• HTML2Canvas: Biblioteca para capturar conteúdo HTML como imagens. 📸
• Lucide React Icons: Conjunto de ícones SVG para uso em projetos React. 🌐
• Context API: Para gerenciar o estado global da aplicação. 🌐
• LocalStorage: Para persistência de dados no navegador. 💾

Funcionalidades Principais 🎯

Controle de Ícones

• Seleção de Ícone: Os usuários podem selecionar entre uma variedade de ícones disponíveis. 🖇️
• Ajuste de Propriedades: Permite ajustar o tamanho, rotação e cor do ícone selecionado. 🖊️
• Prévia e Download: Exibe uma prévia do ícone personalizado e oferece a opção de baixá-lo como uma imagem PNG. 📥

Controle de Fundo

• Personalização de Fundo: Os usuários podem ajustar o arredondamento, preenchimento e cor do fundo. 🖌️
• Salvamento de Configurações: As configurações escolhidas são salvas no armazenamento local do navegador. 💾

Diálogo de Seleção de Ícone

• Interface de Diálogo: Um diálogo modal é utilizado para selecionar o ícone desejado. 🗣️
• Feedback Visual: O diálogo fornece feedback visual ao usuário, mostrando a seleção atual e permitindo a escolha de outra opção. 👁️

Estrutura do Projeto

O projeto é estruturado em componentes React, cada um responsável por uma parte específica da interface do usuário ou lógica de negócios. Utiliza hooks do React para gerenciar o estado e efeitos colaterais, bem como o contexto para gerenciar o estado global da aplicação.

Demonstração ▶

demo.mp4

Contribuições🤝

Contribuições são bem-vindas Se você encontrar um bug, tiver uma sugestão de melhoria ou quiser adicionar uma nova funcionalidade, sinta-se à vontade para criar um issue ou pull request. Siga estas etapas:

1. Faça um fork do repositório.
2. Crie um novo branch com sua contribuição (git checkout -b feature/minha-contribuicao).
3. Faça commit das suas alterações (git commit -am 'Adiciona minha contribuição').
4. Faça push para o branch (git push origin feature/minha-contribuicao).
5. Abra um Pull Request.

Suporte ⚙

Se você encontrar algum problema ou tiver dúvidas sobre o uso deste projeto, por favor, abra um issue para discussão.

Desenvolvido com ❤️ por Amadeo Bon para contribuir com a comunidade de desenvolvimento ReactJs. Boa navegação!