# FileIcon
Generates icons for files based on their file type.

Colours files based on their use. Archives are grey, Images are mustard, etc.

## Usage
Include fileicon.css in your web project with

```html
<link rel="stylesheet" href="/fileicon/fileicon.css">
```

Follow the examples below to create some icons.

## Examples
### JPG file (extra large)
```html
<div class="file-icon file-icon-xl" data-type="jpg"></div>
```

<div class="file-icon file-icon-xl" data-type="jpg"></div>

### MP3 file (large)
```html
<div class="file-icon file-icon-lg" data-type="mp3"></div>
```

<div class="file-icon file-icon-lg" data-type="mp3"></div>

### JSON file (normal)
```html
<div class="file-icon" data-type="json"></div>
```

<div class="file-icon" data-type="json"></div>

### WEBM file (small)
```html
<div class="file-icon file-icon-sm" data-type="webm"></div>
```

<div class="file-icon file-icon-sm" data-type="webm"></div>

### DOCX file (extra small)
*Text is not rendered in XS mode.*

```html
<div class="file-icon file-icon-xs" data-type="docx"></div>
```

<div class="file-icon file-icon-xs" data-type="docx"></div>

## Hiding the white corner
If your website doesn't have a white background, you'll want to change the corner colour using a simple CSS rule for your website;

```css
.file-icon::before{
  border-color: #color #color rgba(255,255,255,.35) rgba(255,255,255,.35);
}
```