react-extension-icons
v1.1.6
Published
A library for rendering file extension icons in React
Downloads
84
Maintainers
Readme
React Extension Icons
Description
A library for rendering file extension icons in React. This package provides SVG icons for various file extensions with three variants: color, single_color, and grayscale.
Installation
npm install react-extension-icons
Usage
Basic Usage
You can use the Icon
component to render icons based on file extensions.
import React from 'react';
import { Icon } from 'react-extension-icons';
const App: React.FC = () => {
return (
<div>
<Icon extension="pdf" variant="color" size={48} className="custom-class" />
<Icon extension="docx" variant="single_color" size={48} color="blue" />
<Icon extension="jpg" variant="grayscale" size={48} />
</div>
);
};
export default App;
Individual Icons
You can also use individual icon components if you prefer to import them directly.
import React from 'react';
import { PdfIconColor, DocxIconSingleColor, JpgIconGrayscale } from 'react-extension-icons';
const App: React.FC = () => {
return (
<div>
<PdfIconColor width={48} height={48} className="custom-class" />
<DocxIconSingleColor width={48} height={48} color="blue" />
<JpgIconGrayscale width={48} height={48} />
</div>
);
};
export default App;
Props
Icon
| Prop | Type | Default | Description |
|------------|----------------------------|-----------|------------------------------------------------|
| extension | string
| | The file extension to render the icon for. |
| variant | 'color' \| 'single_color' \| 'grayscale'
| 'color'
| The variant of the icon to render. |
| size | number
| 24
| The size of the icon. |
| className | string
| ''
| Additional CSS classes to apply to the icon. |
| color | string
| ''
| The color of the icon (applies only to single_color
variant). |
Individual Icon Components
All individual icon components accept the following props:
| Prop | Type | Default | Description |
|------------|------------|-----------|------------------------------------------------|
| width | number
| 24
| The width of the icon. |
| height | number
| 24
| The height of the icon. |
| className | string
| ''
| Additional CSS classes to apply to the icon. |
| color | string
| ''
| The color of the icon (applies only to single_color
variant). |
Supported Extensions
This package supports the following file extensions:
| Variants | Icon |
|----------|------|
| ai | |
| avi |
|
| bmp |
|
| crd |
|
| csv |
|
| dll |
|
| doc, docx |
|
| dwg, dxf |
|
| eps |
|
| exe |
|
| flv |
|
| gif |
|
| html, htm |
|
| iso |
|
| java, jar |
|
| jpg, jpeg, jpe, jif, jfif, jfi |
|
| mdb |
|
| mid, midi |
|
| mov, qt |
|
| mp3 |
|
| mp4, m4a, m4p |
|
| mpeg, mpg, mp2, mpe, mpv |
|
| pdf |
|
| png |
|
| ppt, pptx, pps, ppsx, potx, potm, ppsm, ppam, sldx, sldm |
|
| ps |
|
| psd |
|
| pub |
|
| rar |
|
| raw |
|
| rss |
|
| svg |
|
| tiff, tif |
|
| txt |
|
| wav |
|
| wma, wmv |
|
| xml |
|
| xsl |
|
| zip |
|
Credits
Icons are sourced from this Figma file created by Graphy.
License
This project is licensed under the ISC License.