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