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.