{"id":15183,"library":"react-file-icon","title":"React File Icon Component","description":"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.","status":"active","version":"1.6.0","language":"javascript","source_language":"en","source_url":"https://github.com/corygibbons/react-file-icon","tags":["javascript","react","component","svg","icons","file types"],"install":[{"cmd":"npm install react-file-icon","lang":"bash","label":"npm"},{"cmd":"yarn add react-file-icon","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-file-icon","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for rendering React components.","package":"react","optional":false},{"reason":"Peer dependency required for rendering React components into the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"Since version 1.0.0, `FileIcon` is a named export. Default imports or CommonJS `require()` will not work as expected.","wrong":"import FileIcon from 'react-file-icon';\nconst FileIcon = require('react-file-icon');","symbol":"FileIcon","correct":"import { FileIcon } from 'react-file-icon';"},{"note":"A named export providing a collection of predefined styles for various file extensions, commonly used with the spread operator.","wrong":"const { defaultStyles } = require('react-file-icon');","symbol":"defaultStyles","correct":"import { defaultStyles } from 'react-file-icon';"},{"note":"TypeScript type for the FileIcon component's props, useful for type checking and autocompletion.","symbol":"FileIconProps","correct":"import type { FileIconProps } from 'react-file-icon';"}],"quickstart":{"code":"import React from 'react';\nimport { FileIcon, defaultStyles } from 'react-file-icon';\n\nconst MyFileDisplay = () => {\n  return (\n    <div style={{ display: 'flex', gap: '20px', padding: '20px' }}>\n      <div style={{ width: '100px', height: '100px' }}>\n        <FileIcon extension=\"pdf\" {...defaultStyles.pdf} />\n      </div>\n      <div style={{ width: '100px', height: '100px' }}>\n        <FileIcon extension=\"docx\" {...defaultStyles.docx} />\n      </div>\n      <div style={{ width: '100px', height: '100px' }}>\n        <FileIcon extension=\"png\" {...defaultStyles.png} />\n      </div>\n      <div style={{ width: '100px', height: '100px' }}>\n        <FileIcon \n          extension=\"js\" \n          type=\"code\" \n          color=\"#f7df1e\" \n          glyphColor=\"#333\" \n          labelColor=\"#333\" \n          labelTextColor=\"white\"\n          labelUppercase\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default MyFileDisplay;","lang":"typescript","description":"This quickstart demonstrates how to render `FileIcon` components for various file types, using both the provided `defaultStyles` and custom props for styling."},"warnings":[{"fix":"Change `import FileIcon from 'react-file-icon';` to `import { FileIcon } from 'react-file-icon';`.","message":"The `FileIcon` component is no longer the default export. It must now be imported as a named export.","severity":"breaking","affected_versions":">=1.0.0"},{"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>`).","message":"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.","severity":"breaking","affected_versions":">=1.0.0"},{"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.","message":"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+).","severity":"gotcha","affected_versions":">=1.5.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Use a named import: `import { FileIcon } from 'react-file-icon';`","cause":"Attempting to import `FileIcon` as a default export or using CommonJS `require()` syntax after version 1.0.0.","error":"TypeError: (0 , react_file_icon__WEBPACK_IMPORTED_MODULE_0__.FileIcon) is not a function"},{"fix":"Remove the `size` prop and control the icon's dimensions by styling its parent container.","cause":"Using the `size` prop on the `FileIcon` component, which was removed in version 1.0.0.","error":"Property 'size' does not exist on type 'IntrinsicAttributes & FileIconProps'."},{"fix":"Verify the extension name matches a key in `defaultStyles` or provide custom styles directly to the `FileIcon` component for unsupported extensions.","cause":"Attempting to access a style property from `defaultStyles` for an extension (`xyz` in this example) that is not defined in the `defaultStyles` object.","error":"TypeError: Cannot read properties of undefined (reading 'xyz')"}],"ecosystem":"npm"}