Skip to content

Commit

Permalink
Change to TypeScript
Browse files Browse the repository at this point in the history
  • Loading branch information
@lunatic-fox
lunatic-fox committed Oct 19, 2022
1 parent ae5d5c1 commit 6b5d7d4
Show file tree
Hide file tree
Showing 8 changed files with 80 additions and 78 deletions.
52 changes: 26 additions & 26 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,22 @@
</div>


&nbsp; 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 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.*
## List of contents
[**1. Overview**](#overview)\
&nbsp; &nbsp; [**1.1. Selecting icon**](#11-selecting-icon)\
&nbsp; &nbsp; [**1.2. Selecting theme or color**](#12-selecting-theme-or-color)\
&nbsp; &nbsp; &nbsp; &nbsp; [**1.2.1. theme**](#121-theme)\
&nbsp; &nbsp; &nbsp; &nbsp; [**1.2.2. color**](#122-color)\
&nbsp; &nbsp; [**1.3. Selecting version**](#13-selecting-version)\
&nbsp; &nbsp; [**1.4. Resizing**](#14-resizing)\
&emsp;[**1.1. Selecting icon**](#11-selecting-icon)\
&emsp;[**1.2. Selecting theme or color**](#12-selecting-theme-or-color)\
&emsp;&emsp;[**1.2.1. theme**](#121-theme)\
&emsp;&emsp;[**1.2.2. color**](#122-color)\
&emsp;[**1.3. Selecting version**](#13-selecting-version)\
&emsp;[**1.4. Resizing**](#14-resizing)\
[**2. Examples**](#2-examples)\
&nbsp; &nbsp; [**2.1. Markdown**](#21-markdown)\
&nbsp; &nbsp; [**2.2. HTML**](#22-html)\
&nbsp; &nbsp; [**2.3. Results**](#23-results)\
&emsp;[**2.1. Markdown**](#21-markdown)\
&emsp;[**2.2. HTML**](#22-html)\
&emsp;[**2.3. Results**](#23-results)\
[**3. Dependencies**](#3-dependencies)

<div align="right">
Expand All @@ -36,7 +36,7 @@
</div>

## 1. Overview
&nbsp; Use the base URL below to access the API.
&emsp;Use the base URL below to access the API.
```https
https://deviconapi.vercel.app/?
```
Expand All @@ -55,7 +55,7 @@ https://deviconapi.vercel.app/?
</div>

### 1.1. Selecting icon
&nbsp; Just add the icon name after the base URL. If no other parameter is added it will return the default icon in its default color with 128×128px of size.
&emsp;Just add the icon name after the base URL. If no other parameter is added it will return the default icon in its default color with 128×128px of size.

***Example***
```https
Expand All @@ -70,25 +70,25 @@ https://deviconapi.vercel.app/?
</div>

### 1.2. Selecting theme or color
&nbsp; You can choose the color of the icon by adding the `theme` or `color` parameter, using `&` after the icon name.\
&nbsp; Is important to note that `theme` has priority over `color` parameter, so if both are present only `theme` will work.
&emsp;You can choose the color of the icon by adding the `theme` or `color` parameter, using `&` after the icon name.\
&emsp;Is important to note that `theme` has priority over `color` parameter, so if both are present only `theme` will work.

<div align="right">

[*back to top*](#devicon-api)
</div>

### 1.2.1. theme
&nbsp; 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. 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`.

***Example using `dark`***\
&nbsp; Next.js icon filled in `#ffffff`
&emsp;Next.js icon filled in `#ffffff`
```https
<URL>/?nextjs&theme=dark
```

***Example using `light`***\
&nbsp; Next.js icon filled in `#000000`
&emsp;Next.js icon filled in `#000000`
```https
<URL>/?nextjs&theme=light
```
Expand All @@ -99,23 +99,23 @@ https://deviconapi.vercel.app/?
</div>

### 1.2.2. color
&nbsp; This parameter receives any hexadecimal color and CSS colors as value.
&emsp;This parameter receives any hexadecimal color and CSS colors as value.

<div align="center">

**Note that hexadecimal colors can not have `#` on the request!**
</div>

&nbsp; Hexadecimal colors can be in any of the following patterns: `2ff`, `22ffff`, `abc5`, `aabbcc55`.
&emsp;Hexadecimal colors can be in any of the following patterns: `2ff`, `22ffff`, `abc5`, `aabbcc55`.

***Example using hexadecimal***\
&nbsp; JavaScript icon filled in `#ff5656`
&emsp;JavaScript icon filled in `#ff5656`
```https
<URL>/?javascript&color=ff5656
```

***Example using CSS color***\
&nbsp; JavaScript icon filled in `#ff0000`
&emsp;JavaScript icon filled in `#ff0000`
```https
<URL>/?javascript&color=red
```
Expand All @@ -126,9 +126,9 @@ https://deviconapi.vercel.app/?
</div>

### 1.3. Selecting version
&nbsp; Sometimes, icons are in different versions and you can specify which one you want by passing a version value to `version` parameter.
&emsp;Sometimes, icons are in different versions and you can specify which one you want by passing a version value to `version` parameter.

&nbsp; Possible version values are: `original`, `plain`, `line`,`original-wordmark`, `plain-wordmark` and `line-wordmark`.
&emsp;Possible version values are: `original`, `plain`, `line`,`original-wordmark`, `plain-wordmark` and `line-wordmark`.

<div align="center">

Expand All @@ -137,7 +137,7 @@ https://deviconapi.vercel.app/?
</div>

***Example using `line`***\
&nbsp; Apache icon in `line` version where default is `plain`.
&emsp;Apache icon in `line` version where default is `plain`.
```https
<URL>/?apache&version=line
```
Expand All @@ -148,10 +148,10 @@ https://deviconapi.vercel.app/?
</div>

### 1.4. Resizing
&nbsp; If you are using Markdown you can resize the icon without add an `img` element with `width` attribute, for instance. Just add some value to the `size` parameter and you are ready to go.
&emsp;If you are using Markdown you can resize the icon without add an `img` element with `width` attribute, for instance. Just add some value to the `size` parameter and you are ready to go.

***Example using 50px***\
&nbsp; Node.js icon in 50×50px.
&emsp;Node.js icon in 50×50px.
```https
<URL>/?nodejs&size=50
```
Expand Down
6 changes: 4 additions & 2 deletions api/index.js → api/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,11 @@
@license MIT
*//***/

const SVGBuilder = require('../src/builder');
import { VercelResponse } from '@vercel/node';
import { Query } from '../src/@builder';
import SVGBuilder from '../src';

module.exports = async (req, res) => {
module.exports = async (req: { query: Query }, res: VercelResponse) => {
SVGBuilder(req.query)
.then(svg => {
res.setHeader('Content-Type', 'image/svg+xml');
Expand Down
52 changes: 26 additions & 26 deletions docs/ptbr/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,22 @@
</a>
</div>

&nbsp; 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 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.*
## Lista de conteúdos
[**1. Visão geral**](#1-visão-geral)\
&nbsp; &nbsp; [**1.1. Selecionando o ícone**](#11-selecionando-o-ícone)\
&nbsp; &nbsp; [**1.2. Selecionando o tema ou a cor**](#12-selecionando-o-tema-ou-a-cor)\
&nbsp; &nbsp; &nbsp; &nbsp; [**1.2.1. tema**](#121-tema)\
&nbsp; &nbsp; &nbsp; &nbsp; [**1.2.2. cor**](#122-cor)\
&nbsp; &nbsp; [**1.3. Selecionando a versão**](#13-selecionando-a-versão)\
&nbsp; &nbsp; [**1.4. Redimensionando**](#14-redimensionando)\
&emsp;[**1.1. Selecionando o ícone**](#11-selecionando-o-ícone)\
&emsp;[**1.2. Selecionando o tema ou a cor**](#12-selecionando-o-tema-ou-a-cor)\
&emsp;&emsp;[**1.2.1. tema**](#121-tema)\
&emsp;&emsp;[**1.2.2. cor**](#122-cor)\
&emsp;[**1.3. Selecionando a versão**](#13-selecionando-a-versão)\
&emsp;[**1.4. Redimensionando**](#14-redimensionando)\
[**2. Exemplos**](#2-exemplos)\
&nbsp; &nbsp; [**2.1. Markdown**](#21-markdown)\
&nbsp; &nbsp; [**2.2. HTML**](#22-html)\
&nbsp; &nbsp; [**2.3. Resultados**](#23-resultados)\
&emsp;[**2.1. Markdown**](#21-markdown)\
&emsp;[**2.2. HTML**](#22-html)\
&emsp;[**2.3. Resultados**](#23-resultados)\
[**3. Dependências**](#3-dependências)

<div align="right">
Expand All @@ -35,7 +35,7 @@
</div>

## 1. Visão geral
&nbsp; Use a URL base abaixo para acessar a API.
&emsp;Use a URL base abaixo para acessar a API.
```https
https://deviconapi.vercel.app/?
```
Expand All @@ -54,7 +54,7 @@ https://deviconapi.vercel.app/?
</div>

### 1.1. Selecionando o ícone
&nbsp; 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.
&emsp;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***
```https
Expand All @@ -69,26 +69,26 @@ https://deviconapi.vercel.app/?
</div>

### 1.2. Selecionando o tema ou a cor
&nbsp; Você pode escolher a cor do ícone adicionando o parâmetro `theme` ou `color`, usando `&` após o nome do ícone.\
&nbsp; É importante notar que o parâmetro `theme` tem prioridade sobre `color`, então se ambos estão presentes apenas `theme` irá funcionar.
&emsp;Você pode escolher a cor do ícone adicionando o parâmetro `theme` ou `color`, usando `&` após o nome do ícone.\
&emsp;É importante notar que o parâmetro `theme` tem prioridade sobre `color`, então se ambos estão presentes apenas `theme` irá funcionar.

<div align="right">

[*voltar ao topo*](#devicon-api)
</div>

### 1.2.1. tema
&nbsp; 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. 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`.


***Exemplo usando `dark`***\
&nbsp; Ícone Next.js preenchido em `#ffffff`
&emsp;Ícone Next.js preenchido em `#ffffff`
```https
<URL>/?nextjs&theme=dark
```

***Exemplo usando `light`***\
&nbsp; Ícone Next.js preenchido em `#000000`
&emsp;Ícone Next.js preenchido em `#000000`
```https
<URL>/?nextjs&theme=light
```
Expand All @@ -99,23 +99,23 @@ https://deviconapi.vercel.app/?
</div>

### 1.2.2. cor
&nbsp; Este parâmetro recebe qualquer cor hexadecimal e cores CSS como valor.
&emsp;Este parâmetro recebe qualquer cor hexadecimal e cores CSS como valor.

<div align="center">

**Note que cores hexadecimais não podem ter `#` na requisição!**
</div>

&nbsp; Cores hexadecimais podem estar em qualquer dos seguintes padrões: `2ff`, `22ffff`, `abc5`, `aabbcc55`.
&emsp;Cores hexadecimais podem estar em qualquer dos seguintes padrões: `2ff`, `22ffff`, `abc5`, `aabbcc55`.

***Exemplo usando hexadecimal***\
&nbsp; Ícone JavaScript preenchido em `#ff5656`
&emsp;Ícone JavaScript preenchido em `#ff5656`
```https
<URL>/?javascript&color=ff5656
```

***Exemplo usando cor CSS***\
&nbsp; Ícone JavaScript preenchido em `#ff0000`
&emsp;Ícone JavaScript preenchido em `#ff0000`
```https
<URL>/?javascript&color=red
```
Expand All @@ -126,9 +126,9 @@ https://deviconapi.vercel.app/?
</div>

### 1.3. Selecionando a versão
&nbsp; À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`.
&emsp;À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`.

&nbsp; Possíveis valores de versão são: `original`, `plain`, `line`,`original-wordmark`, `plain-wordmark` e `line-wordmark`.
&emsp;Possíveis valores de versão são: `original`, `plain`, `line`,`original-wordmark`, `plain-wordmark` e `line-wordmark`.

<div align="center">

Expand All @@ -137,7 +137,7 @@ https://deviconapi.vercel.app/?
</div>

***Exemplo usando `line`***\
&nbsp; Ícone Apache na versão `line` onde o padrão é `plain`.
&emsp;Ícone Apache na versão `line` onde o padrão é `plain`.
```https
<URL>/?apache&version=line
```
Expand All @@ -148,10 +148,10 @@ https://deviconapi.vercel.app/?
</div>

### 1.4. Redimensionando
&nbsp; 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.
&emsp;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***\
&nbsp; Ícone Node.js em 50×50px.
&emsp;Ícone Node.js em 50×50px.
```https
<URL>/?nodejs&size=50
```
Expand Down
7 changes: 4 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "devicon-api",
"version": "0.0.1",
"version": "1.0.0",
"description": "API to change colors and size of Devicon icons.",
"main": "index.js",
"main": "index.ts",
"scripts": {},
"repository": {
"type": "git",
Expand All @@ -25,6 +25,7 @@
"text-to-svg": "^3.1.5"
},
"devDependencies": {
"@types/text-to-svg": "^3.1.1"
"@types/text-to-svg": "^3.1.1",
"@vercel/node": "^2.5.26"
}
}
17 changes: 8 additions & 9 deletions src/builder.d.ts → src/@builder/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,19 @@ type IconVersions =
| 'plain-wordmark'
| 'line-wordmark';

type SVGBuilder = (query: {
[k: string]: '';
color: string;
theme?: 'dark' | 'light';
version?: IconVersions;
size?: number
}) => Promise<string>;
export type Query = {
color: string,
theme: 'dark' | 'light',
version: IconVersions,
size: number
};

type IconsObj = {
export type IconsObj = {
[k: string]: {
defaults: {
icon: number;
color: string;
};
versions: IconVersions;
};
}
};
0 src/data/data.json → src/data/index.json
View file
File renamed without changes.
22 changes: 11 additions & 11 deletions src/builder.js → src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,14 @@
@license MIT
*//***/

const fs = require('fs');
const path = require('path');
const textToSVG = require('text-to-svg')
.loadSync(path.join(__dirname, './font/devicon.ttf'));
import fs from 'fs';
import path from 'path';
import TextToSVG from 'text-to-svg';
import { IconsObj, Query } from './@builder';

/** @type {SVGBuilder} */
const SVGBuilder = async query => {
const textToSVG = TextToSVG.loadSync(path.join(__dirname, './font/devicon.ttf'));

const SVGBuilder = async (query: Query) => {
const versionPriority = [
'original',
'plain',
Expand All @@ -19,9 +20,8 @@ const SVGBuilder = async query => {
'plain-wordmark',
'line-wordmark'
];

/** @type {IconsObj} */
const iconsObj = JSON.parse(fs.readFileSync(path.join(__dirname, './data/data.json'), 'utf8'));

const iconsObj: IconsObj = JSON.parse(fs.readFileSync(path.join(__dirname, './data/index.json'), 'utf8'));

const iconName = Object.keys(query)
.filter(e => ![
Expand Down Expand Up @@ -53,6 +53,6 @@ const SVGBuilder = async query => {
});
}
return `<svg xmlns="http://www.w3.org/2000/svg"></svg>`;
};
}

module.exports = SVGBuilder;
export default SVGBuilder;
Loading

1 comment on commit 6b5d7d4

@vercel
Copy link

@vercel vercel bot commented on 6b5d7d4 Oct 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

deviconapi – ./

deviconapi-joseliojunior.vercel.app
deviconapi.vercel.app
deviconapi-git-main-joseliojunior.vercel.app

Please sign in to comment.