devicon-react

Introduction

Devicon React is a Reaction implementation of Devicon (a library containing the logos of many programming tools technologies.)

Devicon React converts the font versions of the logos available components used in React!

Similarly, the npm package React Devicon exists should users prefer to add technology logos to their React applications in the form of filesize-optimized SVG components.

Installation

Using NPM:

npm install 'devicon-react' --save

Using Yarn:

yarn add 'react-devicon'

Usage

__Notice:__ This documentation should be used in tandem with the documentation provided by Devicon for desired effect.

Import the into your own component and use as such:

``javascript
import Devicon from 'devicon-react';

const app = () => {

}
`

$3

|Prop |Type |Required | Value |
|------------|---------|---------|----------------------------------------------------------------------------------|
|name |String | Yes | see Devicon for selection |
|logoStyle |String | Yes | plain , original |
|wordmark |Boolean | No | true , false (default) |
|colored |Boolean | No | true , false (default) |
|size |String | No | 5rem (default) , 5em , 10px |
|color |Boolean | No | blue , #4267b2 , #46b , hsl(220, 45, 47) , rgb(66, 103, 178) |
|style |Object | No | See description below |
|iconClass |String | No | See description below |

$3

The value of this prop should be set to the desired icon. See Devicon for available options.
`javascript

`

$3

This prop can either be plain or original, see Devicon for visualization.
`javascript


`
__Note:__ Depending on the icon, a brand can have a logo style plain, original, or a mixture of
the two. In some cases, a brand may only variants of one type. The user should consult the Devicon available options on a per-icon basis.

$3

Setting this prop to true will display the icon logo with it's name. See Devicon for visualization.
`javascript

`

$3

This takes advantage of the Devicon's colored class. Setting to true will set the icon's color to its brand color.
`javascript

`
__Note:__ This prop overwrites any custom color passed
via the color property. Likewise, this property overwrites any custom styling added via the style property

$3

This prop allows the user to specify a font size for the icon. Because it uses CSS's font-size property,
all font size unit types are permitted.
`javascript



`

$3

This prop uses CSS to color the font and can take any recognized color type as a string argument.
`javascript



`

$3

This prop allows the user to pass a style object into the Devicon inline or as an external object.

##### Inline
`javascript

`

##### External Object
`javascript
let myStyle = {
fontSize : "5rem",
color: "blue"
}


`

$3

This prop allows the user to write external CSS for a and pass it as a className
to the . This provides the user with the most flexbility, allowing them to
manipulate the icon as they would any element through CSS.

#### CSS (myStyle.css)
`CSS
.custom-icon {
font-size: 5rem;
color: grey;
transition: 0.3s;
}

.custom-icon:hover {
font-size: 7rem;
color: blue;
}
`
#### React Component
`javascript
import Devicon from 'devicon-react';
import './myStyle.css';

const app = () => {

}
`
__Note:__ This prop overwrites any custom color passed
via the color property. Likewise, this property overwrites any custom styling added via the style` property

$3

All icon fonts were taken from Devicon created by Konpa

The idea to build the devicon-react came from the work done on react-devicon by fpoumian

Devicon React is an open source project and is released under the __MIT license__