corygibbons/react-file-icon

React component that makes it easy to render themeable svg file icons.

React File Icon

CodeSandbox demo with default icon styles.

import { FileIcon } from 'react-file-icon';

Props

Property	Type	Default	Description
color	string	whitesmoke	Color of icon background
extension	string	undefined	Text to display in label
fold	bool	true	Displays the corner fold
foldColor	string	undefined	Color of the corner fold
glyphColor	string	undefined	Color of file type icon
gradientColor	string	white	Color of page gradient
gradientOpacity	number	0.25	Opacity of page gradient
labelColor	string	undefined	Color of label
labelTextColor	string	white	Color of label text
labelUppercase	bool	false	Displays the label in all caps
radius	number	4	Corner radius of the file icon
type	enum	undefined	Type of glyph icon to display (One of: 3d, acrobat, android, audio, binary, code, compressed, document, drive, font, image, presentation, settings, spreadsheet, vector, video)

Default Styles

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

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

react-file-icon's Issues

Add .apk extension icon

A cool android logo based .apk icon would be awesome!

".skp" extension can be added

Pass style to svg

Would be cool if we could pass inline style to the SVG element.

How to get suggestion on Icon

Hi @corygibbons,

I am not getting any suggestion for extension='css' in VS Code. Is this intentional or is it an issue? Please help.

<FileIcon extension='css' {...defaultStyles.aac} />

Add additional code glyphs

Provide more thorough default styles for all file types

It's a little bit tedious to specify styles for different type icon. These styles are good enough. Is it possible to use this component like:

files.map(file => {
    return (
        <FileIcon
            size={48}
            extension="{file.extension}"
        />
    );
});

Then represents its default styles.

React 18 Support

Could you update the library to support react 18?

$ npm i react-file-icon
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"~18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.2.0" from [email protected]
npm ERR! node_modules/react-file-icon
npm ERR!   react-file-icon@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

How to change the size of the icon using tailwind css

Hey how can I change the size of the icon using tailwind css?

Ability to Combine multiple default style extension

Please is the possible to have a feature like this

<FileIcon 
    glyphColor={tinycolor(linkColor).lighten(40)}
    labelUppercase
    extension={kycData.idCardfiles?.[0]&& getFileExtension(kycData.idCardfiles?.[0].name)} 
    {...defaultStyles['png'|'jpg']} 
    />
    
 Or
 
 ```js
<FileIcon 
    glyphColor={tinycolor(linkColor).lighten(40)}
    labelUppercase
    extension={kycData.idCardfiles?.[0]&& getFileExtension(kycData.idCardfiles?.[0].name)} 
    {...defaultStyles['image/*']} 
    />

 Thanks
 

icon size

How can change the size of the icon ?
thank you

Doesn't install on React 18 due to a dependency issue

npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0 || ^16.2.0" from [email protected]
npm ERR! node_modules/react-file-icon
npm ERR! react-file-icon@"*" from the root project

Any chance to fix the dependency tree to suport React 18?

Mime type support

Hi,

Thanks for a great library. There is a small suggestion: using mime types instead of current map, as they are standardized and much easier to utilize directly.

Add ability to provide custom glyphs

I created colored version demo

I create colored version demo, based on the demo from readme file.

word, text, -> blue tone
excel, sheet -> green tone
video, audio -> purple tone
image -> orange tone
model, object -> brown tone
zip -> yellow + orange + black label
system, font, sourceCode, default -> grayscale

https://codesandbox.io/s/react-file-icon-colored-tmwut?file=/src/App.js

///

If I have more time, I'll make PR to receive glyph path as props. This library is nice to use.

Size props not working

I tried applying size prop but nothing is chaging <FileIcon extension="docx" size={10} />

Component problems

Can I add the className attribute ?

Add type definitions

Hello,

The package is currently not usable with TypeScript. I added own type definitions, but since I am new to TS, rather than opening pull request I offer them here to be checked / corrected and added to right places.

declare module "react-file-icon" {
  import React from "react";

  export type IconType =
    | "3d"
    | "acrobat"
    | "audio"
    | "binary"
    | "code"
    | "code2"
    | "compressed"
    | "document"
    | "drive"
    | "font"
    | "image"
    | "presentation"
    | "settings"
    | "spreadsheet"
    | "vector"
    | "video";

  export interface FileIconProps {
    color?: string;
    extension: string;
    fold?: boolean;
    foldColor?: string;
    glyphColor?: string;
    gradientColor?: string;
    gradientOpacity?: number;
    labelColor?: string;
    labelTextColor?: string;
    labelTextStyle?: object;
    labelUppercase?: boolean;
    radius?: number;
    size?: number;
    type?: IconType;
  }

  export type DefaultExtensionType =
    | "3dm"
    | "3ds"
    | "3g2"
    | "3gp"
    | "7zip"
    | "aac"
    | "aep"
    | "ai"
    | "aif"
    | "aiff"
    | "asf"
    | "asp"
    | "aspx"
    | "avi"
    | "bin"
    | "bmp"
    | "c"
    | "cpp"
    | "cs"
    | "css"
    | "csv"
    | "cue"
    | "dll"
    | "dmg"
    | "doc"
    | "docx"
    | "dwg"
    | "dxf"
    | "eot"
    | "eps"
    | "exe"
    | "flac"
    | "flv"
    | "fnt"
    | "fodp"
    | "fods"
    | "fodt"
    | "fon"
    | "gif"
    | "gz"
    | "htm"
    | "html"
    | "indd"
    | "ini"
    | "java"
    | "jpeg"
    | "jpg"
    | "js"
    | "json"
    | "jsx"
    | "m4a"
    | "m4v"
    | "max"
    | "md"
    | "mid"
    | "mkv"
    | "mov"
    | "mp3"
    | "mp4"
    | "mpeg"
    | "mpg"
    | "obj"
    | "odp"
    | "ods"
    | "odt"
    | "ogg"
    | "ogv"
    | "otf"
    | "pdf"
    | "php"
    | "pkg"
    | "plist"
    | "png"
    | "ppt"
    | "pptx"
    | "pr"
    | "ps"
    | "psd"
    | "py"
    | "rar"
    | "rb"
    | "rm"
    | "rtf"
    | "scss"
    | "sitx"
    | "svg"
    | "swf"
    | "sys"
    | "tar"
    | "tex"
    | "tif"
    | "tiff"
    | "ts"
    | "ttf"
    | "txt"
    | "wav"
    | "webm"
    | "wmv"
    | "woff"
    | "wpd"
    | "wps"
    | "xlr"
    | "xls"
    | "xlsx"
    | "yml"
    | "zip"
    | "zipx";

  declare const FileIcon: React.FunctionComponent<FileIconProps>;
  export default FileIcon;

  export const defaultStyles: Record<
    DefaultExtensionType,
    Partial<FileIconProps>
  >;
}

Bundle Size

Hi there! I noticed that when I pull this package into our project, the tinycolor2 dependency is a little large (14KB parsed from webpack):

It looks like the only reason this package is used is to darken a user-provided color in 3 places. Is there a lighter package that could accomplish this, or could we pull that logic into this code base? Would you be open to a PR if I were to put one up?

Thanks!

`id` must be unique

Hi,

I get some errors with my accessibility checks when using multiple icons because they use the same id:

• https://github.com/corygibbons/react-file-icon/blob/master/src/FileIcon.js#L107
• https://github.com/corygibbons/react-file-icon/blob/master/src/FileIcon.js#L129
• https://github.com/corygibbons/react-file-icon/blob/master/src/FileIcon.js#L184
• https://github.com/corygibbons/react-file-icon/blob/master/src/FileIcon.js#L194

It seems on some others you used an unique ID like for https://github.com/corygibbons/react-file-icon/blob/master/src/FileIcon.js#L96 . Any reason why you kept others without the unique suffix?

Thank you,

Using Defaults

Hi this is a great project @corygibbons !

What do you think about adding a prop like usingDefaultStyles that would use the defaults styles based on the extension?

So instead of:

const extension = getFileExtension(file);
const iconStyles = (defaultStyles as any)[extension] || {}; // Typescript does not like the type of defaultStyles as the key is not string

return <FileIcon extension={suffix} {...iconStyles} />

You could do (which would internally do the same as above):

const extension = getFileExtension(file);

return <FileIcon extension={suffix} usingDefaultStyles={true} />

I assume this is the most common use-case, or?

Icons doesn't render properly

TO DELETE

How to set FileIcon defaultStyle dynamically

sample says
<FileIcon extension="docx" {...defaultStyles.docx} />

But i wish to use this dynamically.

extension property is ok but how to set ...defaultStyle.? based on the extension ?

Label Font Size and position for label

Hi, I need to know how to reduce the font size for label, also how can I position it?

Smaller version for icons?

It is difficult to distinguish icons if they are smaller than 50 pixels

How to set FileIcon defaultStyle dynamically

facing below issue:
Property 'myDynamicTypeVariable' does not exist on type 'Record<DefaultExtensionType, Partial>'.ts(2339)