Como adicionar emblemas da tecnologia na documentação
Iremos demonstrar de um jeito simples neste post como criar ícones de sobre as tecnologias de um determinado projeto. Com essa biblioteca shields io veremos como é simples adicionar os emblemas, ícones, figurinhas, stickers (sei lá como você chama) ao seu projeto como na imagem abaixo.
Lembrando que estes ícones/figuras são um link para uma imagem, então você pode utilizar em sua documentação em um arquivo .md ou em sua ferramenta de documentação, como confluence, docsify ou qualquer uma que você possa anexar uma imagem por ícone.
Como utilizar?
Como podemos ver, todo o “emblema” é um link para uma imagem auto-gerada, e para customizar esse link, basta fazer as alterações conforme você queira.
Vamos ver como exemplo o card acima do GitLab e alterar para ser do GitHub.
https://img.shields.io/badge/GitLab-330F63?style=for-the-badge&logo=gitlab&logoColor=white
https://img.shields.io/badge/<LABEL>-<cor_em_hexa_decimal_>?style=<estilo_do_emblema>&logo=<logo_do_emblema>&logoColor=<cor_da_logo>
Como podemos ver no link acima, basta editarmos os links com os parâmetros desejados.
Para inserir o sticker do github vamos utilizar os seguintes parâmetros:
- Label: Github
- Cor: efefef
- Estilo: for-the-badge
- Logo: github
- Cor da logo: black
https://img.shields.io/badge/github-efefef?style=for-the-badge&logo=github&logoColor=black
Documentação de referencia
Claro que existem mais formas de customizar seus “emblemas” adicionando parâmetros dinâmicos, estilos de emblemas diferentes, enfim.
Segue aqui o link para a documentação oficial ensinado como utilizar, e também o link para a biblioteca de ícones que o shield io utiliza.
