react-extension-icons
v1.1.6
Published
A library for rendering file extension icons in React
Downloads
30
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.