0.2.1 • Published 7 months ago
react-native-file-icon v0.2.1
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
Installation
npm install react-native-file-iconor
yarn add react-native-file-iconDependencies
This library needs these dependencies to be installed in your project before you can use it:
yarn add react-native-svgUsing expo?
expo install react-native-svgUsage
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