react-fileicons is a simple and intuitive react component for visualizing file icons.
You can reach the Storybook here.
First you should import the needed files.
import FileIcon, { ColorScheme, IconStyle } from "react-fileicons";After that you can use the FileIcon component.
To change the color of the component, you can use the built-in color list ColorScheme.
<FileIcon
extension="doc"
colorScheme={ ColorScheme.red }
iconStyle={ IconStyle.normal }
size={ 100 }
/>Alternatively, you can use your own color configurations. However, these must be in the following format.
<FileIcon
extension="doc"
colorScheme={{ primary: "#1E88E5", secondary: "#1976D2" }}
iconStyle={ IconStyle.normal }
size={ 100 }
/>The following options can be used to access different designs:
<FileIcon
extension="doc" # more than 5 chars can require another fontSize
background="#fff" # use to pass your background color to the component
colorScheme={ ColorScheme.red } # must be in the above format
iconStyle={ IconStyle.normal } # normal / gradient / outline
size={ 100 } # variable size property
fontSize={ 100 } # optional, use to change font size independent size property
/>
To migrate from v1 to v2, some props have to be changed.
The props smallest, small, medium have been removed and the size of the icons can now be variably adjusted via the prop size. The props linearGradient and outline have also been removed and the prop iconStyle is now available. This can be used with the IconStyle class as shown above. If you want to customize the fontSize use fontSize property. Now all characters are displayed instead of only 4 characters as before.
// v1
<FileIcon
extension="doc"
colorScheme={ ColorScheme.red }
gradient
medium
/>
// v2
<FileIcon
extension="doc"
colorScheme={ ColorScheme.red }
iconStyle={ IconStyle.gradient }
size={ 100 }
/>Bugs can be found here.
Changelog can be found here.
If you make any changes or improvements to this project, please make a pull request to merge your changes with the upstream.
- React
- Storybook
- styled-components
- Material UI Colors
react-fileicons is licensed under the MIT license. Please see LICENSE.md for more info.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent