# 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](https://semver.org/))
##### 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/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](https://fontawesome.com/)). 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](https://material.io/resources/icons/)).
Exemplo de uso de fonte Uncode:
```html
```
Exemplo de uso de fonte De ligaduras:
```html
face
```
##### 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/](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.
```sh
#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
```