corygibbons / react-file-icon Goto Github PK

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

const extension = getFileExtension(file);

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

$ 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.

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