react-file-icon

React File Icon is a small React component library for rendering SVG icons that represent file types — PDFs, spreadsheets, images, code files, and dozens more — using a single <FileIcon /> component. Instead of shipping a full icon font or sprite sheet, it draws the icon at render time from primitives (a folded-page background, a gradient overlay, an optional extension label, and an optional glyph) so every color and shape can be overridden with plain props.

The package ships a defaultStyles lookup mapping common file extensions (docx, mp4, zip, ai, and 200+ others) to sensible prop presets, so consumers can drop in <FileIcon extension="pdf" {...defaultStyles.pdf} /> and get a themed icon without hand-picking colors. It has no runtime dependencies beyond prop-types and the small colord color library, and supports React 16.2 through 19 as a peer dependency.

What You Get

• A <FileIcon /> component that renders a fully custom SVG file icon from props (color, fold, gradient, label, glyph)
• A defaultStyles export mapping 200+ common file extensions to preset colors and glyph types
• Independent props for every visual element — background color, fold color, gradient, label color/text, corner radius, and glyph type
• Dual CJS/ESM builds via microbundle, with React 16.2–19 supported as peer dependencies

Common Use Cases

• Rendering file-type icons in a file manager, upload widget, or document list without shipping an icon font
• Showing a themed icon next to an attachment or download link that matches an app’s color scheme
• Building a media/asset browser where different file types need visually distinct, recognizable icons
• Replacing static file-type PNGs/SVGs in a design system with a single themeable component

Under The Hood

Architecture The library is a single-purpose React component (FileIcon.js) exported alongside a static extension-to-style lookup table (defaultStyles.js) and a large SVG glyph dictionary (glyphs.js), all re-exported from a thin index.js barrel. There’s no internal state or lifecycle — FileIcon is a pure function component that derives shadow/fold/gradient colors from a single color prop using the colord library’s darken() helper, with optional extension and type props layered on top for label text and glyph selection. The clip-path-based fold effect and gradient overlay are computed inline as SVG primitives keyed by a React.useId()-derived unique id (falling back to a manual counter on older React), so the component carries no external state dependency — changing the color prop cascades to fold/gradient/label colors automatically unless explicit overrides are given. Everything lives in one component, so changing the core SVG structure would touch every consumer, but the abstraction surface is deliberately kept small.

Tech Stack The package targets React 16.2 through 19 as a peer dependency, built with microbundle into CommonJS (dist/react-file-icon.js) and ES module (dist/react-file-icon.esm.js) bundles from a single src/index.js entry, with prop-types for runtime prop validation and colord (plus its names plugin) for lightweight color parsing and shading — avoiding heavier color libraries. Testing runs on Jest via babel-jest with @testing-library/react and jest-image-snapshot (backed by component-image to rasterize the rendered SVG) for visual regression coverage, and CI (GitHub Actions) runs a build then the test suite.

Code Quality The test suite exercises the rendered component through image-snapshot assertions across styles, border radii, colors, and every glyph type, giving broad visual coverage though no unit-level assertions on prop-to-output logic. Prop types are declared via prop-types rather than TypeScript, so there’s no compile-time type safety for consumers. Naming is consistent and the component avoids side effects, but a typeof jest === 'undefined' check embedded directly in the component to stabilize snapshot ids is a testing concern leaking into production code, and no linter config is present beyond Prettier formatting.

API Design The public API is minimal — a single FileIcon component plus an exported defaultStyles lookup object keyed by file extension — so a consumer typically writes <FileIcon extension="docx" {...defaultStyles.docx} /> with no configuration step, provider, or CSS import required. Every visual aspect (fold, gradient, label, glyph) derives sensible defaults from just a color prop, and all customization points are flat, independent props rather than nested config objects, keeping boilerplate close to zero for the common case while still allowing full override of every color and shape parameter.