Registry / web-framework / react-file-icon

react-file-icon

library1.6.0jsnpmunverified

react-file-icon is a React component library designed to render scalable vector graphic (SVG) icons representing various file types. It provides a `FileIcon` component that can display an icon based on a file extension, with extensive customization options for colors, gradients, folds, and labels. The library is currently on version 1.6.0 and shows an active development cadence, with several minor releases supporting newer React versions (up to React 19) and improving bundle size through dependency swaps (e.g., `colord` replacing `tinycolor2`). Key differentiators include its rich set of customizable props, an exported `defaultStyles` object for common file extensions, and the use of modern React features like `React.useId` for unique ID generation, ensuring efficient and accessible icon rendering.

web-framework

npm install react-file-icon

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-FILE-ICON

react-file-icon

web-frameworkjavascriptv1.6.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

FileIcon

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

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

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

defaultStyles

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

✗ const { defaultStyles } = require('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.

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;

Debug

Known issues

breakingThe `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';`.

affects: >=1.0.0

breakingThe `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>`).

affects: >=1.0.0

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

affects: >=1.5.0

Errors

Common errors & fixes

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

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

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')

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.

Upgrade

Version history

1.6.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for rendering React components.

react-domrequiredPeer dependency required for rendering React components into the DOM.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/corygibbons/react-file-icon ↗

packagehttps://www.npmjs.com/package/react-file-icon ↗