https://github.com/temmiland/react-fileicons
Simple and intuitive react component for visualizing file icons ✨
https://github.com/temmiland/react-fileicons
file-icons icons overwrites react react-fileicons storybook
Last synced: about 1 month ago
JSON representation
Simple and intuitive react component for visualizing file icons ✨
- Host: GitHub
- URL: https://github.com/temmiland/react-fileicons
- Owner: temmiland
- License: mit
- Created: 2020-02-23T22:42:25.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-06-12T10:01:41.000Z (about 2 years ago)
- Last Synced: 2025-08-31T09:45:03.522Z (10 months ago)
- Topics: file-icons, icons, overwrites, react, react-fileicons, storybook
- Language: MDX
- Homepage: http://demo.temmi.land/react-fileicons/
- Size: 13.9 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-fileicons - [](https://www.npmjs.com/package/react-fileicons)
react-fileicons is a simple and intuitive react component for visualizing file icons.
## Demo
You can reach the Storybook [here](https://demo.temmi.land/react-fileicons/).
## Usage
First you should import the needed files.
```javascript
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`.
```javascript
```
Alternatively, you can use your own color configurations. However, these must be in the following format.
```javascript
```
The following options can be used to access different designs:
```text
```
## Migrate from v1 to v2
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.
```javascript
// v1
// v2
```
## Known issues
Bugs can be found [here](https://github.com/temmiland/react-fileicons/labels/bug).
## Changelog
Changelog can be found [here](https://github.com/temmiland/react-fileicons/blob/main/CHANGELOG.md).
## Contribute
### Pull Requests
If you make any changes or improvements to this project, please make a pull request to merge your changes with the upstream.
## Thanks to ❤
- React
- Storybook
- styled-components
- Material UI Colors
## License
react-fileicons is licensed under the MIT license. Please see [LICENSE.md](https://github.com/temmiland/react-fileicons/blob/main/LICENSE.md) for more info.