React File Icon Component

Common errors

• TypeError: (0 , react_file_icon__WEBPACK_IMPORTED_MODULE_0__.FileIcon) is not a function

  cause Attempting to import `FileIcon` as a default export or using CommonJS `require()` syntax after version 1.0.0.
  fix Use a named import: `import { FileIcon } from 'react-file-icon';`

• Property 'size' does not exist on type 'IntrinsicAttributes & FileIconProps'.

  cause Using the `size` prop on the `FileIcon` component, which was removed in version 1.0.0.
  fix Remove the `size` prop and control the icon's dimensions by styling its parent container.

• TypeError: Cannot read properties of undefined (reading 'xyz')

  cause Attempting to access a style property from `defaultStyles` for an extension (`xyz` in this example) that is not defined in the `defaultStyles` object.
  fix Verify the extension name matches a key in `defaultStyles` or provide custom styles directly to the `FileIcon` component for unsupported extensions.

Warnings

• breaking The `FileIcon` component is no longer the default export. It must now be imported as a named export.
  Fix: Change `import FileIcon from 'react-file-icon';` to `import { FileIcon } from 'react-file-icon';`.
• breaking The `size` prop has been removed. Icons now inherently scale to 100% width of their container. Developers should control the icon size by adjusting the dimensions of the parent element.
  Fix: Remove the `size` prop and instead apply width/height styles to the `FileIcon`'s parent container (e.g., `<div style={{ width: '50px' }}><FileIcon ... /></div>`).
• gotcha Version 1.5.0 replaced `lodash.uniqueid` with `React.useId` for generating unique IDs, with a fallback for older React versions. While a fallback exists, optimal performance and adherence to modern React practices benefit from using React versions that natively support `React.useId` (React 18+).
  Fix: Ensure your project is using React 18 or newer for the best compatibility and performance benefits from `React.useId`. If on an older React version, the fallback should still work, but consider upgrading React for full feature utilization.

Install

• npm install react-file-icon npm
• yarn add react-file-icon yarn
• pnpm add react-file-icon pnpm

Imports

• FileIcon
  wrong:

  import FileIcon from 'react-file-icon';
  const FileIcon = require('react-file-icon');

  correct:

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

  Since version 1.0.0, `FileIcon` is a named export. Default imports or CommonJS `require()` will not work as expected.
• defaultStyles
  wrong:

  const { defaultStyles } = require('react-file-icon');

  correct:

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

  A named export providing a collection of predefined styles for various file extensions, commonly used with the spread operator.
• FileIconProps

  import type { FileIconProps } from 'react-file-icon';

  TypeScript type for the FileIcon component's props, useful for type checking and autocompletion.

Quickstart

This quickstart demonstrates how to render `FileIcon` components for various file types, using both the provided `defaultStyles` and custom props for styling.

import React from 'react';
import { FileIcon, defaultStyles } from 'react-file-icon';

const MyFileDisplay = () => {
  return (
    <div style={{ display: 'flex', gap: '20px', padding: '20px' }}>
      <div style={{ width: '100px', height: '100px' }}>
        <FileIcon extension="pdf" {...defaultStyles.pdf} />
      </div>
      <div style={{ width: '100px', height: '100px' }}>
        <FileIcon extension="docx" {...defaultStyles.docx} />
      </div>
      <div style={{ width: '100px', height: '100px' }}>
        <FileIcon extension="png" {...defaultStyles.png} />
      </div>
      <div style={{ width: '100px', height: '100px' }}>
        <FileIcon 
          extension="js" 
          type="code" 
          color="#f7df1e" 
          glyphColor="#333" 
          labelColor="#333" 
          labelTextColor="white"
          labelUppercase
        />
      </div>
    </div>
  );
};

export default MyFileDisplay;