aevo-icons-monorepo v0.0.0-development
Biblioteca de ícones da AEVO
Contexto
O frontend de nossos módulos depende de uma biblioteca de ícones Svg chamada "My Icons". Diferente de outras como Font Awesome ou Material Icons, essa não disponibiliza uma maneira fácil de buscar e utilizar os ícones de forma escalável. Para permitir o uso de um grande número de ícones e permitir tornar a manutenção escalável, optamos por trabalhar com pacotes instaláveis.
Vantagens e desvantagens desta abordagem
Vantagens da abordagem:
- Pesquisa e visualização: Maneira simples de pesquisar e visualizar os ícones. Após fazer o commit, a busca pode ser feita direto no link
- Uso simples no HTML: Uso do ícone no HTML com poucas linhas de código. O único contraponto é registrar o ícone no módulo, mas é necessário para otimizações do bundle e lazy loading dos ícones
- Bundle menor: Bundle final somente inclui ícones utilizados, o que reduz o tamanho da aplicação para o usuário final
- Lazy Loading: Enquanto o módulo não for utilizado, o ícone também não será processado
- Carga inicial: Há mais de 7 mil ícones prontos para uso, então espera-se que a manutenção desse repositório não seja frequente
Desvantagens:
- Inserção de novo ícone: A cada ícone novo, é necessário atualizar e publicar os dois pacotes (aevo-icons e ngx-aevo-icons). Inserir ícones inline e direto no projeto da aplicação é mais simples, contudo torna a aplicação mais pesada e atrasa a indexação e build da aplicação
- Registro de ícone: Além de usar o ícone no HTML, é necessário registrar no módulo que ele será utilizado
Organização do repositório
Este é um mono-repositório, isto é, um repositório com vários projetos / pacotes agrupados. Esse recurso foi utilizado para evitar a complexidade de gerenciar e localizar múltiplos repositórios simples e relacionados.
Projetos
aevo-icon
- Diretório com pacote npm (agnóstico de framework) e aplicação para visualizar e pesquisar pelos ícones
- É aqui que você vai adicionar os novos svgs ou editar (nome ou conteúdo) de algum existente
ngx-aevo-icon
- É o wrapper para Angular da biblioteca acima
- Aqui há o componente de ícone, serviço de registro de ícone e módulo
- Nesse projeto está o pacote usado pela aplicação
Dentro de cada um deles há uma descrição detalhada sobre a motivação e como usar.
Como usar
Para pesquisar e visualizar os ícones: https://aevo-icons.netlify.app/
Instale a biblioteca para Angular:
npm install @duraes-antonio/ngx-aevo-icons
Para usar a biblioteca veja essa seção
Fluxo de manutenção
sequenceDiagram
participant Designer
participant Dev
Designer->>Dev: Entrega novo SVG
Dev-->>aevo-icon (pacote): Inclui svg e executa "npm run build"
aevo-icon (pacote)-->>Dev: Gera diretório "dist"
Dev-->>aevo-icon (pacote): Atualiza versão do pacote no "package.json"
aevo-icon (pacote)-->>Dev: Versão do pacote atualizado (1.0.0 -> 1.1.0)
Dev-->>aevo-icon (pacote): Publica pacote com "npm run publish:library"
aevo-icon (pacote)-->>Dev: Pacote publicado (v1.1.0)
Dev-->>ngx-aevo-icon (pacote): Atualiza versão da dependência "aevo-icon" (1.0.0 -> 1.1.0)
ngx-aevo-icon (pacote)-->>Dev: Wrapper para Angular está usando a lib atualizada
Dev-->>ngx-aevo-icon (pacote): Atualiza versão do wrapper no "package.json" (2.1.0 -> 2.2.0)
ngx-aevo-icon (pacote)-->>Dev: Versão do wrapper para Angular atualizado
Dev-->>ngx-aevo-icon (pacote): Publica o wrapper com "npm run publish:library"
ngx-aevo-icon (pacote)-->>Dev: Pacote publicado
Dev->>Designer: Biblioteca atualizada
2 years ago