Devapix

Ways of use: @devapix/react

To use Devicon React elements you just need to install @devapix/react npm package.

npm i @devapix/react

Double click to copy

After installation, the next step is to import the modules you want to your .jsx or .tsx file, like in the example below.

Example

page.jsx

import { DeviconJavascript } from '@devapix/react'

export default function Page() {
  return (
    <section>
      <h2>JavaScript logo</h2>
      <DeviconJavascript/>
    </section>
  )
}

Double click to copy

This example is equivalent to the request below.

Request

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

Double click to copy

Response

Element name

All React element names follow this pattern: <Devicon[Icon name]/>, see the examples below.

python:     <DeviconPython/>
javascript: <DeviconJavascript/>
typescript: <DeviconTypescript/>
java:       <DeviconJava/>
ruby:       <DeviconRuby/>

Double click to copy

Release

To select a specific release you just have to specify the release number when importing.

import { DeviconPhotoshop } from '@devapix/react'

export default function Page() {
  return (
    <section>
      <DeviconPhotoshop/>
    </section>
  )
}

Double click to copy

This is equivalent to the latest release of photoshop icon.

Request

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

Double click to copy

Response

While this example below.

import { DeviconPhotoshop } from '@devapix/react/2.15.1'
 
 export default function Page() {
   return (
     <section>
       <DeviconPhotoshop/>
     </section>
   )
 }

Double click to copy

Is equivalent to photoshop icon of 2.15.1 release.

Request

https://devapix.vercel.app/api?photoshop&r=2.15.1

Double click to copy

Response

⚠️ Notice that this library only works with released icons, that is, it will not work with icons that are still under develop branch of Devicon project.

Other properties

The other properties are optional attributes and the same as API request, take a look at the list below.

version:
    'o'  | 'original'
  | 'p'  | 'plain'
  | 'l'  | 'line'
  | 'ow' | 'original-wordmark'
  | 'pw' | 'plain-wordmark'
  | 'lw' | 'line-wordmark'
color: string
theme: 'd' | 'dark' | 'l' | 'light'
size: number // default: 128

Double click to copy

Here we have more examples using the rest of properties.

Icons

page.jsx

import {
  DeviconJavascript,
  DeviconTypescript,
  DeviconPython,
  DeviconVscode
} from '@devapix/react'

export default function Page() {
  return (
    <section>
      <DeviconJavascript theme='light' size={80}/>
      <DeviconTypescript theme='dark'/>
      <DeviconPython color='#008004'/>
      <DeviconVscode version='ow' color='#ff5300' size={80}/>
    </section>
  )
}

Double click to copy

Requests

https://devapix.vercel.app/api?javascript&t=l&s=80https://devapix.vercel.app/api?typescript&t=dhttps://devapix.vercel.app/api?python&c=008004https://devapix.vercel.app/api?vscode&v=ow&c=ff5300&s=80

Double click to copy

Response

Twitter@2.8 icon

page.jsx

import Devicon from '@devapix/react/2.8'

export default function Page() {
  return (
    <section>
      <DeviconTwitter
        version={'p'}
        color='#c7bd2b'
        size={80}/>
    </section>
  )
}

Double click to copy

Request

https://devapix.vercel.app/api?twitter&r=2.8&v=p&c=c7bd2b&s=80

Double click to copy

Response

Twitter@latest icon

page.jsx

import Devicon from '@devapix/react'

export default function Page() {
  return (
    <section>
      <DeviconTwitter
        version={'p'}
        color='#c7bd2b'
        size={80}/>
    </section>
  )
}

Double click to copy

Request

https://devapix.vercel.app/api?twitter&v=p&c=c7bd2b&s=80