The react-file-icon's discuss from corygibbons

How to set FileIcon defaultStyle dynamically

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

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?

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.

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.

How to change the size of the icon using tailwind css

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

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!

Add .apk extension icon

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

Size props not working

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

Add ability to provide custom glyphs

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?

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>
  >;
}

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 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} />

icon size

How can change the size of the icon ?
thank you

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.

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

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

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,

Smaller version for icons?

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

corygibbons / react-file-icon Goto Github PK

react-file-icon's Issues

Recommend Projects

Recommend Topics

Recommend Org