A react implementation of the devicons font library
npm install devicon-react components used in React!
npm install 'devicon-react' --save
yarn add 'react-devicon'
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