Feature Request: Custom icons for file/folder

[umar-shabbir]

Current Behavior

Icons appear in the file manager for popular file extensions like txt, json etc.

Suggested Change

Be able to provide custom icon for any file/folder based on some custom property added to the File object structure.

This could be a useful enhancement to the package and will allow more customization on the file manager UI

---

v1.20.2

[jfvilas]

Hi. I'm using RFM for navigating through a "virtual" filesystem made up of the container filesystems of a set of Kubernetes pods. My top level hierarchy object is a namespace, after that users can navigate to a pod, then the user can select a container (in case of pods with more than one container), and after that the user can see and manage a filesystem. I wish to be able to use different icons for different types of objects (namespaces, pods and containers). Currently I'm showing just folders but it would be very useful to be able to use specific SVG icons. I think the interface of the library could be implemented by providing an Array (or Map) of JSX icons, that can matched with specific "type" value in such a way that, for example, type 9 is an icon in the array (or Map) of icons, and that icon will show up when one object of type 9 has to be shown on the file manager.

Currently this how my filemanager feels:

I wish to be able to show proper kubernetes object icons.

Thanks for your work.

[Saifullah-dev]

@jfvilas This would be a great addition to react-file-manager. Will hopefully add this feature in a next few days.

[MacroMelon]

Hi! First off, thank you so much for your work, this is exactly what I needed for my project!

I'd like to propose an extension to this feature request - allowing custom colours for specific files and folders (names and icon both).

Just for some context, my project requires users to combine items (folders / files) from two virtual file systems into one (i.e. copy items from file system 1 into file system 2) and I would like to show the result of these operations in a separate file manager window where any new items created would be coloured green (or some colour) and overwritten / modified items will be blue (or some other colour). A bit like how some IDE's git integrations show new files as green and modified files as blue.

A method of implementation would be to add a colour property to each object in the array of types mentioned by @jfvilas and then colour accordingly when matching.

Or simply just include a colour property for each object in the files array prop and colour them accordingly.

Thanks again!