React-extension-icons NPM

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