https://github.com/corygibbons/react-file-icon

React component that makes it easy to render themeable svg file icons.
https://github.com/corygibbons/react-file-icon

icons react react-component svg

Last synced: about 1 year ago
JSON representation

React component that makes it easy to render themeable svg file icons.

• Host: GitHub
• URL: https://github.com/corygibbons/react-file-icon
• Owner: corygibbons
• License: mit
• Created: 2018-01-25T17:15:38.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2025-02-14T18:25:06.000Z (over 1 year ago)
• Last Synced: 2025-03-31T16:13:42.529Z (about 1 year ago)
• Topics: icons, react, react-component, svg
• Language: JavaScript
• Homepage:
• Size: 440 KB
• Stars: 125
• Watchers: 11
• Forks: 30
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React File Icon

[![npm version](https://img.shields.io/npm/v/react-file-icon.svg?style=flat-square)](https://www.npmjs.com/package/react-file-icon)

[![gh workflow](https://img.shields.io/github/workflow/status/corygibbons/react-file-icon/Test/master.svg?style=flat-square)](https://github.com/corygibbons/react-file-icon/actions?query=workflow%3ATest+branch%3Amaster)

[CodeSandbox demo](https://codesandbox.io/s/react-file-icon-hv4kh) with default icon styles.

```js

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](https://github.com/corygibbons/react-file-icon/blob/master/src/defaultStyles.js) that can be used as a starting point when rendering icons. Object keys map to file extensions.

```js

import { FileIcon, defaultStyles } from 'react-file-icon';

// Render a .docx icon with default styles

;

```