{"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.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-file-icon"],"cli":null},"imports":["import { FileIcon } from 'react-file-icon';","import { defaultStyles } from 'react-file-icon';","import type { FileIconProps } from 'react-file-icon';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}