Uma página de interface para selecionar os ícones.
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.
- Apenas ícones que podem ser convertidos para fonte, em outras palavras, apenas ícones simples monocromáticos.
1. Visão geral
1.1. Selecionando o ícone
1.2. Selecionando o tema ou a cor
1.2.1. tema
1.2.2. cor
1.3. Selecionando a versão
1.4. Redimensionando
2. Exemplos
2.1. Markdown
2.2. HTML
2.3. Resultados
3. Dependências
Use a URL base abaixo para acessar a API.
https://deviconapi.vercel.app/
Ao longo desta documentação esta URL base será referenciada como <URL>/
Apenas adicione o nome do ícone após a URL base. Se nenhum outro parâmetro é adicionado será retornado o ícone padrão na sua cor padrão com 128×128px de tamanho.
Exemplo
<URL>/csharp
<URL>/cplusplus
<URL>/javascript
Você pode escolher a cor do ícone adicionando o parâmetro theme ou color, usando & após o nome do ícone.
É importante notar que o parâmetro theme tem prioridade sobre color, então se ambos estão presentes apenas theme irá funcionar.
Este parâmetro recebe light ou dark como valores.
No GitHub markdown você deverá usar uma lógica ao redor. Veja o exemplo abaixo.
Exemplo
<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
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
Ícone Next.js preenchido em #ffffff
<URL>/nextjs?theme=dark
Exemplo usando light
Ícone Next.js preenchido em #000000
<URL>/nextjs?theme=light
Este parâmetro recebe qualquer cor hexadecimal e cores CSS como valor.
Note que cores hexadecimais não podem ter # na requisição!
Cores hexadecimais podem estar em qualquer dos seguintes padrões: 2ff, 22ffff, abc5, aabbcc55.
Exemplo usando hexadecimal
Ícone JavaScript preenchido em #ff5656
<URL>/javascript?color=ff5656
Exemplo usando cor CSS
Ícone JavaScript preenchido em #ff0000
<URL>/javascript?color=red
Às vezes, ícones estão em diferentes versões e você pode especificar qual você quiser passando um valor de versão para o parâmetro version.
Possíveis valores de versão são: original, plain, line,original-wordmark, plain-wordmark e line-wordmark.
Lembre-se que esta API funciona apenas com ícones monocromáticos.
Você pode ver todas as versões suportadas de cada ícone nesta lista.
Exemplo usando line
Ícone Apache na versão line onde o padrão é plain.
<URL>/apache?version=line
Se você está usando Markdown você pode redimensionar o ícone sem adicionar um elemento img com o atributo width, por exemplo. Apenas adicione algum valor para o parâmetro size e já pode seguir adiante.
Exemplo usando 50px
Ícone Node.js em 50×50px.
<URL>/nodejs?size=50
<img src="https://deviconapi.vercel.app/nodejs?theme=dark&size=80"/><img src="https://deviconapi.vercel.app/github?size=180&color=f0f"/><img src="https://deviconapi.vercel.app/github?version=original-wordmark&size=180"/>| Descrição | Resultado |
|---|---|
|
nodejs tema (theme): escuro (dark) tamanho (size): 80px |
|
| https://deviconapi.vercel.app/nodejs?theme=dark&size=80 | |
| Descrição | Resultado |
|---|---|
|
github cor (color): #2ea043 tamanho (size): 180px |
|
| https://deviconapi.vercel.app/github?color=2ea043&size=180 | |
| Descrição | Resultado |
|---|---|
|
github versão (version): original-wordmark cor (color): #1f6feb tamanho (size): 180px |
|
| https://deviconapi.vercel.app/github?version=original-wordmark&color=1f6feb&size=180 | |
Baseado em Devicon e distribuído por Vercel
Feito com ❤ por Josélio Júnior (Lunatic Fox)