Astro component that display icon of file by it's extension. Based on react-file-icon.
Take a look at astro-file-icon.pages.dev to view the default icon styles.
pnpm install astro-file-icon
# Or
yarn add astro-file-icon
# Or
npm install astro-file-iconimport { FileIcon } from "astro-file-icon";| Property | Type | Default | Description |
|---|---|---|---|
color |
string | whitesmoke |
Color of icon background |
extension |
string | undefined |
Text to display in label |
fold |
bool | true |
Displays the corner fold |
foldColor |
string | undefined |
Color of the corner fold |
glyphColor |
string | undefined |
Color of file type icon |
gradientColor |
string | white |
Color of page gradient |
gradientOpacity |
number | 0.25 |
Opacity of page gradient |
labelColor |
string | undefined |
Color of label |
labelTextColor |
string | white |
Color of label text |
labelUppercase |
bool | false |
Displays the label in all caps |
radius |
number | 4 |
Corner radius of the file icon |
type |
enum | undefined |
Type of glyph icon to display |
We also export an object of default styles that can be used as a starting point when rendering icons. Object keys map to file extensions.
import { FileIcon, defaultStyles } from "astro-file-icon";
// Render a .docx icon with default styles
<FileIcon extension="docx" {...defaultStyles.docx} />;