0.3.1 • Published 8 months ago
astro-file-icon v0.3.1
Astro File Icon
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.
Installation
pnpm install astro-file-icon
# Or
yarn add astro-file-icon
# Or
npm install astro-file-iconimport { FileIcon } from "astro-file-icon";Props
| 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 (One of: 3d, acrobat, audio, binary, code, compressed, document, drive, font, image, presentation, settings, spreadsheet, vector, video) |
Default Styles
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 "react-file-icon";
// Render a .docx icon with default styles
<FileIcon extension="docx" {...defaultStyles.docx} />;