react-file-icon
v1.5.0
Published
React component to render svg file icons
Downloads
278,788
Maintainers
Readme
React File Icon
CodeSandbox demo with default icon styles.
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 |
| labelUppercase
| bool | false
| Displays the label in all caps |
| radius
| number | 4
| Corner radius of the file icon |
| type
| enum | undefined
| Type of glyph icon to display (One of: 3d
, acrobat
, android
, 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} />;