react-native-file-icon

React Native component that makes it easy to render themeable svg file icons. React Native version of react-file-icon. This library supports iOS, Android, and Web.

Demo

Expo Snack

Installation

npm install react-native-file-icon

or

yarn add react-native-file-icon

Dependencies

This library needs these dependencies to be installed in your project before you can use it:

yarn add react-native-svg

Using expo?

expo install react-native-svg

Usage

Default Style

We 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-native-file-icon';

// Render a .docx icon with default styles
<FileIcon extension="docx" {...defaultStyles.docx} />;

Props

| Prop | Type | Default | Description | |-------------------|--------------------|---------------|-----------------------------------------------------------------------------------------------------------| | color | string | 'whitesmoke' | The base color of the file icon. | | extension | string | undefined | The file extension that appears as a label on the icon. | | fold | boolean | true | Determines whether to display a folded corner on the file icon. | | foldColor | string | undefined | The color of the folded corner (if displayed). | | glyphColor | string | undefined | The color of the icon glyph (if displayed). | | gradientColor | string | 'white' | The color of the gradient background behind the icon. | | gradientOpacity | number | 0.25 | The opacity of the gradient background behind the icon. | | labelColor | string | undefined | The color of the label background on the icon. | | labelTextColor | string | 'white' | The color of the text on the label. | | labelUppercase | boolean | undefined | Determines whether the label text should be displayed in uppercase. | | radius | number | 4 | The corner radius of the file icon. | | type | FileIconType | undefined | The type of the file icon, which corresponds to a specific glyph. |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library