Fonte de ícones 123milhas

Pacote de ícones destinado a nova iconografia do projeto 123milhas.

Passo a passo para publicar um ícone

Esse tutorial depende do uso de três recursos principais:

• Figma (https://figma.com): Ferramenta de design recomendada para manipulação dos vetores.
• IcoMoon (https://icomoon.io/): Gerador de fontes
• Reposítório da fonte de ícones (https://github.com/Plataforma13/123MilhasIconFont).

1. Clonar o repositório do projeto dos ícones.

O repositório é o lugar onde ficam todas as configurações, dados e versionamento do que foi criado para a geração da fonte. Ele deve ser sempre o ponto de partida para a geração de uma nova versão da fonte.

A pasta raiz do projeto possui a segunte estrutura:

nomes terminados com "/" são diretórios

Arquivo/Diretório	Descrição
dist/	Contém os arquivos gerados pelo gerador de fontes (icomoon).
docs/	Todos os arquivos usados para cosntruir essa documentação e outras páginas do mesmo. Além de arquivos .md, imagens e outros tipos de assets relacionados a documentação devem ficar contidos aqui.
src/	Diretório com arquivos fonte usados no gerador.
.npmignore	Arquivo similar ao .gitignore usado pelo npm para ignorar arquivos e diretórios na hora da publicação.
123-milhas-icons.scss	Arquivo indexador para SASS, usado para facilitar a importação dos arquivos em projetos que usam SASS como preprocessador.
index.js	Arquivo de entrada para os npm scripts. Atualmente é responsavel somente pelo comando npm run demo.
package.json	Configuração do pacote npm. Usado principalmente para nomear as versões da fonte de ícones. (Leitura: semântic versioning)

Além da pasta raiz a pasta src também possui uma organização específica:

nomes terminados com "/" são diretórios

Arquivo/Diretório	Descrição
icons/	Pasta contendo arquivos .svg que são importados no gerador.
123milhas.json	Arquivo de configuração do projeto da fonte usado pelo gerador.

2. Preparar um svg para fontes

2.1 O conteúdo de uma fonte

Uma fonte web é um conjunto de simbolos usados como linguágem escrita ou visual. Um simbolo em uma fonte web é um caminho svg(Leitura: svg paths) preparado para ser redimensionado sem perder proporção e personalizado por meio de propriedades CSS, chamados de glyphs.

Um gliph tem que seguir duas regras básicas: Não possuir bordas(ou strokes no svg) e ossuir somente um agrupamento de vetores. Isso por que as bordas em um vetor escalável sempre tem um tamanho fixo, comprometendo a proporção dos vetores. Além disso diferentes grupos de vetores em um ícone podem ser redimensionados para escalas diferêntes fazendo com que alguns gliphs sejam renderizados diferentemente entre browsers.

No Icomoon uma fonte é constituída de uma seleção de gliphs que são endereçados com códigos Unicode ou com ligaduras. Fontes de ícones que usam unicode renderizam os vetores com classes css(Ex.: Font Awesome). Já as fontes que usam ligaduras renderizam os icones por meio de classes e um texto que é combinado em um único caractere ou gliph (Ex.: Material Icons ou Google Icons).

Exemplo de uso de fonte Uncode:

    <i class="fas fa-icons"></i>

Exemplo de uso de fonte De ligaduras:

    <i class="material-icons">face</i>
    <!--
         O texto dentro do elemento é substituído por um gliph da fonte.
         Isso é bom para acessibilidade pois esse texto pode ser usado
         como texto alternativo.
    -->

2.2 A parte prática: preparando um svg para a conversão em gliph

O figma oferece todas as ferramentas necesarias para o processo a seguir gratuitamente. Por isso vamos usar essa ferramenta nesse tutorial.

1. Selecionar o novo ícone para. Diretamente no figma com a listagem de componentes selecione o(s) caminhos que compõem o ícone e copie os com o comando Ctrl + C

   

2. Colar o ícone em um arquivo editavel. Desenvolvedores não podem editar projetos criados pelo time de design. Logo teremos que usar um arquivo com permissões de edição para preparar os ícones. Para isso colamos o vetor copiado no arquivo editavel com Ctrl + V. [Adicionar imagem]

3. Selecionar todos os vetores e agrupa-los de forma que todos os vetores são redimensionados juntos No figma esse opção chama-se Flatten pode ser acessada clicando com botão direito do mouse em cima do vetor selecionado ou por meio do atalho Ctrl + Alt + E. Imagem: Usando a opção flatten: Imagem: Exemplo de vetor agrupado no mostrador de camadas.

4. Transformar bordas(strokes) em caminhos Com o vetor agrupado, clique com o botão direito e selecionando a Outiline stroke ou use o atalho Ctrl + Shift + O

6. Baixar o svg gerado pelo figma

3. Importar o svg no icomoon

O icomoon é a ferramenta que pega um set de ícones e gera um conjunto de arquivos em formatos suportados como fonte na web. Isso é feito na interface web da aplicação que pode ser acessada em https://icomoon.io/app/.

3.1 Importar o json do projeto icomoon

1. Abrir o icomoon

Clique no nome do projeto na tela que lista a seleção de icones no icomoon(https://icomoon.io/app/). Esse botão fica no canto superior direito da tela.

2. Importar o json na ferramenta

Selecione Import Project

Selecione o arquivo src/123Milhas.json no repo da fonte. Importante: Mesmo se você ja importou o projeto antes no icomoon é bom importar o json denovo. Mas antes disso tudo não deixe de dar um git pull na branch master do projeto.

3. Clique em load para abrir uma lista com os ícones.

Depois disso uma interface assim aparece:

Os ícones são dividos em três grupos:

• Random grid: ícones com tamanhos variados até mesmo no tamanho do svg.
• Toggle - 20x20: Um conjunto de simbolos usados em ações de toggle e todos os ícones desse grupo geralmete tem um tamanho de 20x20
• Normal - 20x20: Assim como o grupo toggle esses ícones tem o tamanho padrão 20x20 e nesse grupo os ícones podem significar basicamente qualquer coisa.

Antes de tudo copie o svg gerado pelo figma para a pasta src/icons do projeto. Depois renomeie o ícone para o nome que vai aparecer na classe css da fonte. Por exemplo se eu estou adicionando um ícone de carro tracejado eu vou renomear o svg para outlined-car.svg. Dessa forma o icomoon vai criar as classes css de acordo com o nome do svg que você importou para a fonte. Por fim no icomoon selecione a opção de importar para o set.

Um diálogo vai aparecer para selecionar arquivos. Selecione o svg que vc acabou de copiar para a pasta src/icons.

Pronto estamos quase aptos para gerar os arquivos da fonte em si.

4. Preparando o projeto icomoon para uma nova versão

Começamos clicando no botão no canto inferior direito da página que diz "Generate font". Mas antes de realizar o download dos arquivos abra as as preferências e altere a versão do projeto no final do modal. Geralmente aumentamos somente o número no campo minor seguindo o semantic versioning.

5. O tão esperado download

Finalmente clique em download e copie o conteúdo do arquivo zip gerado para a pasta dist do repositório do projeto substituindo todos os arquivos la.

6. Baixando o projeto do icomoon

Retorne à página de projetos no icomoon e baixe o json do projeto clicando no botão destacado na imagem. Finalmente copie esse arquivo para a pasta src do repositório substituindo o arquivo 123Milhas.json.

Publicação

No repositório do projeto adicione todos os arquivos alterados e comite a alteração com uma boa mensagem de commit 😉. Depois disso é so fazer aquela pr e esperar o merge na branch principal.

Seguem os comandos usados para publicar uma versão minor. Para publicar no npm você precisa estar logado e ter as permissões neessárias para modificar as versões.

#Adicionando as alterações no git
git commit -a -m"Add outlined plane delay icon"
git push -u origin branch-x

#passos para a publicação no npm (na branch master)

#Altera a versão no package.json e cria uma tag no git
npm version minor 
#Publica a nova versão no npm
npm publish
#Coloca a nova tag no remote principal
git push