Skip to content

lunatic-fox/deviconapi

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Devicon API v1.1.0


An interface page to select the icons.


 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
1.1. Selecting icon
1.2. Selecting theme or color
  1.2.1. theme
  1.2.2. color
1.3. Selecting version
1.4. Resizing
2. Examples
2.1. Markdown
2.2. HTML
2.3. Results
3. Dependencies

1. Overview

 Use the base URL below to access the API.

https://deviconapi.vercel.app/

Through this documentation this base URL will be referred as <URL>/

Jump to examples >>

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

<URL>/csharp
<URL>/cplusplus
<URL>/javascript

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.

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

<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

Devicon

 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

<URL>/nextjs?theme=dark

Example using light
 Next.js icon filled in #000000

<URL>/nextjs?theme=light

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

<URL>/javascript?color=ff5656

Example using CSS color
 JavaScript icon filled in #ff0000

<URL>/javascript?color=red

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.

Example using line
 Apache icon in line version where default is plain.

<URL>/apache?version=line

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.

<URL>/nodejs?size=50

2. Examples

2.1. Markdown

nodejs, dark theme, 80px

![](https://deviconapi.vercel.app/nodejs?theme=dark&size=80)

go, 180px, #f0f

![](https://deviconapi.vercel.app/go?size=180&color=f0f)

go, original-wordmark, 180px

![](https://deviconapi.vercel.app/go?version=original-wordmark&size=180)

2.2. HTML

nodejs, dark theme, 80px

<img src="https://deviconapi.vercel.app/nodejs?theme=dark&size=80"/>

go, 180px, #f0f

<img src="https://deviconapi.vercel.app/go?size=180&color=f0f"/>

go, original-wordmark, 180px

<img src="https://deviconapi.vercel.app/go?version=original-wordmark&size=180"/>

2.3. Results

Description Result
nodejs
theme: dark
size: 80px
nodejs
https://deviconapi.vercel.app/nodejs?theme=dark&size=80
Description Result
github
color: #2ea043
size: 180px
github
https://deviconapi.vercel.app/github?color=2ea043&size=180
Description Result
github
version: original-wordmark
color: #1f6feb
size: 180px
github
https://deviconapi.vercel.app/github?version=original-wordmark&color=1f6feb&size=180

3. Dependencies

Based in Devicon and powered by Vercel
Made with ❤ by Josélio Júnior (Lunatic Fox)