Ícones

Os ícones tem um papel bem importante na comunicação. Eles devem ser o mais simples, objetivos e claros possivel. São usados ​​sem exageros ao longo da jornada do usuário e principalmente de maneira ilustrativa.

COLOCAR EXEMPLOS

Devem seguir o padrão visual Contorno / Arrendondado. Todos os vetores são exportados em formato .SVG e convertidos em um arquivo de fonte único de nome bidu_icons, que será usado em todas as aplicações.

Os arquivos .SVG são convertidos em fonte através do IcoMoon App

O formato de fonte foi escolhido por apresentar melhor performance, sendo o tamanho final do arquivo mais leve, com possibilidade de cacheamento e maior compatibilidade entre navegadores. Referência


Criação

Ao adicionar novos ícones à biblioteca, além de seguirem o mesmo padrão visual, a performance também deve ser considerada, manter as formas o mais simples possíveis, pois quanto menos pontos vetoriais a imagem tiver mais leve será o arquivo final.

Devem seguir dimensões de XxY e margem interna de XxY para que se mantenha a mesma estrutura e proporção.

COLOCAR EXEMPLOS

Todos os vetores que incluem traçado devem ser convertidos para preenchimento e transformados em formas únicas, dessa forma não ocorrem perdas ou deformações durante a conversão para fonte.


Acessibilidade

Por conta dos ícones presentes na fonte terem função decorativa e sempre estarem acompanhados por textos descritivos devem conter o atributo aria-hidden, dessa forma serão ignorados por leitores de tela melhorando a fluidez do conteúdo.