react-file-icon's Introduction

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`, `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} />;

Recommend Projects