Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lunatic-fox/deviconapi
API to change colors and size of Devicon icons.
https://github.com/lunatic-fox/deviconapi
api devicon icon vercel
Last synced: 23 days ago
JSON representation
API to change colors and size of Devicon icons.
- Host: GitHub
- URL: https://github.com/lunatic-fox/deviconapi
- Owner: lunatic-fox
- License: mit
- Created: 2022-10-18T04:14:47.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-13T05:36:11.000Z (almost 2 years ago)
- Last Synced: 2024-10-04T17:46:33.726Z (about 1 month ago)
- Topics: api, devicon, icon, vercel
- Language: TypeScript
- Homepage: https://lunaticfox.vercel.app/deviconApi
- Size: 2.37 MB
- Stars: 9
- Watchers: 2
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Devicon API v1.1.0 
---
### [Devicon API - Interface](https://lunaticfox.vercel.app/deviconApi)
An interface page to select the icons.
---
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.*
## List of contents
[**1. Overview**](#overview)\
[**1.1. Selecting icon**](#11-selecting-icon)\
[**1.2. Selecting theme or color**](#12-selecting-theme-or-color)\
[**1.2.1. theme**](#121-theme)\
[**1.2.2. color**](#122-color)\
[**1.3. Selecting version**](#13-selecting-version)\
[**1.4. Resizing**](#14-resizing)\
[**2. Examples**](#2-examples)\
[**2.1. Markdown**](#21-markdown)\
[**2.2. HTML**](#22-html)\
[**2.3. Results**](#23-results)\
[**3. Dependencies**](#3-dependencies)
[*back to top*](#devicon-api)
## 1. Overview
Use the base URL below to access the API.
```https
https://deviconapi.vercel.app/
```
**Through this documentation this base URL will be referred as `/`**
[***Jump to examples >>***](#2-examples)
[*back to top*](#devicon-api)
### 1.1. Selecting icon
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
/csharp
/cplusplus
/javascript
```
[*back to top*](#devicon-api)
### 1.2. Selecting theme or color
You can choose the color of the icon by adding the `theme` or `color` parameter, using `&` after the icon name.\
Is important to note that `theme` has priority over `color` parameter, so if both are present only `theme` will work.
[*back to top*](#devicon-api)
### 1.2.1. theme
This parameter receives `light` or `dark` as value.
In GitHub markdown you should use a wrapping logic. See the example below.
***Example***
```html
```
***Result***
---
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`***\
Next.js icon filled in `#ffffff`
```https
/nextjs?theme=dark
```
***Example using `light`***\
Next.js icon filled in `#000000`
```https
/nextjs?theme=light
```
[*back to top*](#devicon-api)
### 1.2.2. color
This parameter receives any hexadecimal color and CSS colors as value.
**Note that hexadecimal colors can not have `#` on the request!**
Hexadecimal colors can be in any of the following patterns: `2ff`, `22ffff`, `abc5`, `aabbcc55`.
***Example using hexadecimal***\
JavaScript icon filled in `#ff5656`
```https
/javascript?color=ff5656
```
***Example using CSS color***\
JavaScript icon filled in `#ff0000`
```https
/javascript?color=red
```
[*back to top*](#devicon-api)
### 1.3. Selecting version
Sometimes, icons are in different versions and you can specify which one you want by passing a version value to `version` parameter.
Possible version values are: `original`, `plain`, `line`,`original-wordmark`, `plain-wordmark` and `line-wordmark`.
**Remember that this API works only with monochromatic icons.**\
**You can see all supported versions of each icon in this [list](./docs/list-of-icons-and-versions/README.md).**
***Example using `line`***\
Apache icon in `line` version where default is `plain`.
```https
/apache?version=line
```
[*back to top*](#devicon-api)
### 1.4. Resizing
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***\
Node.js icon in 50×50px.
```https
/nodejs?size=50
```
[*back to top*](#devicon-api)
## 2. Examples
### 2.1. Markdown
#### nodejs, dark theme, 80px
```markdown
```
#### go, 180px, #f0f
```markdown
```
#### go, original-wordmark, 180px
```markdown
```
[*back to top*](#devicon-api)
### 2.2. HTML
#### nodejs, dark theme, 80px
```html
```
#### go, 180px, #f0f
```html
```
#### go, original-wordmark, 180px
```html
```
[*back to top*](#devicon-api)
### 2.3. Results
Description
Result
nodejs
theme: dark
size: 80px
https://deviconapi.vercel.app/nodejs?theme=dark&size=80
Description
Result
github
color: #2ea043
size: 180px
https://deviconapi.vercel.app/github?color=2ea043&size=180
Description
Result
github
version: original-wordmark
color: #1f6feb
size: 180px
https://deviconapi.vercel.app/github?version=original-wordmark&color=1f6feb&size=180
[*back to top*](#devicon-api)
## 3. Dependencies
* [**axios**](https://www.npmjs.com/package/axios)
* [**text-to-svg**](https://www.npmjs.com/package/text-to-svg)
**Based in [Devicon](https://github.com/devicons/devicon) and powered by [Vercel](https://vercel.com/)**\
**Made with ❤ by [Josélio Júnior (Lunatic Fox)](https://github.com/lunatic-fox)**