Devapix

Ways of use: devicon.js

To use <devicon> tag with pure JavaScript you just need to add Devapix script into your .html file.

<script src="https://devapix.vercel.app/js/devicon.js"></script>

Double click to copy

Let's take a look at an example.

index.html

<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <script src="https://devapix.vercel.app/js/devicon.js"></script>
  <body>
    <devicon icon="csharp"/>
  </body>
</html>

Double click to copy

Note that <script> is inserted before <body> and <devicon> is inside <body>.

devicon.js script allows <devicon> tag to work properly and convert it, when the page is loaded, to an <img> with the proper API request in its src attribute.

Example

index.html <body> - Code

<body>
  <devicon icon="csharp"/>
</body>

Double click to copy

index.html <body> - After page loads

<body>
  <img src="https://devapix.vercel.app/api?csharp"/>
</body>

Double click to copy

Request

https://devapix.vercel.app/api?csharp

Double click to copy

Response

The properties expected by <devicon> are the same of API request.

// Mandatory property
(icon | i): string

// Optional properties
(r | release): string
(v | version):
    'o'  | 'original'
  | 'p'  | 'plain'
  | 'l'  | 'line'
  | 'ow' | 'original-wordmark'
  | 'pw' | 'plain-wordmark'
  | 'lw' | 'line-wordmark'
(c | color): string
(t | theme): 'd' | 'dark' | 'l' | 'light'
(s | size): number

Double click to copy

Here we have two more examples of <devicon> using the rest of properties.

Facebook icon

Code

<devicon 
  icon="facebook" 
  release="2.7" 
  version="plain" 
  color="#c7bd2b" 
  size="64"/>

Double click to copy

Request

https://devapix.vercel.app/api?facebook&release=2.7&version=plain&color=c7bd2b&size=64

Double click to copy

Response

ChakraUI icon

Code

<devicon 
  i="chakraui" 
  r="dev" 
  v="o" 
  t="d" 
  s="64"/>

Double click to copy

Request

https://devapix.vercel.app/api?chakraui&r=dev&v=o&t=d&s=64