React File Icon
import FileIcon from 'react-file-icon';Props
| Property | Type | Default | Description |
|---|---|---|---|
color |
string | whitesmoke | Color of icon background |
extension |
string | undefined | Text to display in label |
fold |
bool | true | Displays the corner fold |
foldColor |
string | undefined | Color of the corner fold |
glyphColor |
string | undefined | Color of file type icon |
gradientColor |
string | white | Color of page gradient |
gradientOpacity |
number | 0.25 | Opacity of page gradient |
labelColor |
string | undefined | Color of label |
labelTextColor |
string | white | Color of label text |
labelTextStyle |
object | undefined | Style of label text |
labelUppercase |
bool | false | Displays the label in all caps |
radius |
number | 4 | Corner radius of the file icon |
size |
number | undefined | Width and height of the file icon |
type |
enum | undefined | Type of glyph icon to display (One of: 3d, acrobat, audio, binary, code, compressed, document, drive, font, image, presentation, settings, spreadsheet, vector, video) |
Default Styles
We also export an object of default styles that can be used as a starting point when rendering icons. Object keys map to file extensions.
import FileIcon, { defaultStyles } from 'react-file-icon';
// Render a .docx icon with default styles
<FileIcon extension="docx" {...defaultStyles.docx} />