Merge pull request #1 from lunatic-fox/develop

Add docs

README.md

@@ -1,7 +1,7 @@
 
 <div align="center">
 
-# Devicon API
+# Devicon API ![](https://deviconapi.vercel.app/?devicon&size=40)
 
 <a href="#">
   <img src="https://shields.io/badge/English-000dff">
@@ -12,7 +12,7 @@
 </div>
 
 
-&emsp;This project serves Devicon v2.15.1 icons¹ via API, that way you can edit the icon color and size on the fly.
+&emsp;This project serves [Devicon](https://github.com/devicons/devicon) v2.15.1 icons¹ via API, that way you can edit the icon color and size on the fly.
 
 > 1. *Only icons that can be converted to font, in other words, only monochromatic plain icons.*
 
@@ -79,7 +79,29 @@ https://deviconapi.vercel.app/?
 </div>
 
 ### 1.2.1. theme
-&emsp;This parameter receives `light` or `dark` as value. Therefore, if you are using the icon into a light scheme, selecting `light` will fill the icon with `#000000`. Otherwise, if the icon are in a dark scheme, by selecting `dark` the icon will be filled with `#ffffff`.
+&emsp;This parameter receives `light` or `dark` as value. 
+
+&emsp;In GitHub markdown you should use a wrapping logic. See the example below.
+
+***Example***
+```html
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://deviconapi.vercel.app/?devicon&theme=dark&size=50">
+  <img alt="Devicon" title="Devicon" src="https://deviconapi.vercel.app/?devicon&theme=light&size=50">
+</picture>
+```
+
+***Result***
+<div align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://deviconapi.vercel.app/?devicon&theme=dark&size=50">
+    <img alt="Devicon" title="Devicon" src="https://deviconapi.vercel.app/?devicon&theme=light&size=50">
+  </picture>
+</div>
+
+---
+
+&emsp;A dark color scheme is defined in `source.media` and `srcset` points to a dark themed icon `#ffffff`. If `source.media` is false, then the inner `img` will be shown instead and `src` should be pointing to a light themed icon `#000000`.
 
 ***Example using `dark`***\
 &emsp;Next.js icon filled in `#ffffff`

docs/ptbr/README.md

@@ -1,7 +1,7 @@
 
 <div align="center">
 
-# Devicon API
+# Devicon API ![](https://deviconapi.vercel.app/?devicon&size=40)
 
 <a href="../../README.md">
   <img src="https://shields.io/badge/English-000dff">
@@ -11,7 +11,7 @@
 </a>
 </div>
 
-&emsp;Este projeto serve os ícones¹ Devicon v2.15.1 via API, dessa forma você pode editar a cor do ícone e o tamanho em tempo real.
+&emsp;Este projeto serve os ícones¹ [Devicon](https://github.com/devicons/devicon) v2.15.1 via API, dessa forma você pode editar a cor do ícone e o tamanho em tempo real.
 
 > 1. *Apenas ícones que podem ser convertidos para fonte, em outras palavras, apenas ícones simples monocromáticos.*
 
@@ -78,8 +78,28 @@ https://deviconapi.vercel.app/?
 </div>
 
 ### 1.2.1. tema
-&emsp;Este parâmetro recebe `light` ou `dark` como valores. Portanto, se você estiver usando o ícone dentro de um esquema claro, selecionando `light` preencherá o ícone com `#000000`. Pelo contrário, se o ícone estiver em um esquema escuro, selecionando `dark` o ícone será preenchido com `#ffffff`.
+&emsp;Este parâmetro recebe `light` ou `dark` como valores. 
 
+&emsp;No GitHub markdown você deverá usar uma lógica ao redor. Veja o exemplo abaixo.
+
+***Exemplo***
+```html
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://deviconapi.vercel.app/?devicon&theme=dark&size=50">
+  <img alt="Devicon" title="Devicon" src="https://deviconapi.vercel.app/?devicon&theme=light&size=50">
+</picture>
+```
+
+***Resultado***
+<div align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://deviconapi.vercel.app/?devicon&theme=dark&size=50">
+    <img alt="Devicon" title="Devicon" src="https://deviconapi.vercel.app/?devicon&theme=light&size=50">
+  </picture>
+</div>
+
+---
+&emsp;Um esquema de cor escuro é definido em `source.media` e `srcset` aponta para um ícone com tema escuro `#ffffff`. Se `source.media` é falso, então a `img` interna será mostrada no lugar e `src` deverá apontar para um ícone com tema claro `#000000`.
 
 ***Exemplo usando `dark`***\
 &emsp;Ícone Next.js preenchido em `#ffffff`