@aslamhus/fileicon

Create a file icon image with any file extension.

Github repo: https://github.com/aslamhus/fileicon

Installation

npm install @aslamhus/fileicon

Getting started

For node users:

// common js
const { FileIcon } = require('@aslamhus/fileicon');
// es6
import { FileIcon } from '@aslamhus/fileicon';

Using in the browser:

// as a script tag
<script src='./lib/FileIcon.js'></script>

// as a module
<script type='module'>
import { FileIcon } from '../lib/FileIcon.mjs';
...

Usage

Draw a file icon with a a jpg extension. The default theme is greyscale.

const fileIcon = new FileIcon();
fileIcon.create('jpg').then((icon) => {
  document.body.append(icon);
});

the create method returns a Promise that resolves to an img element.

Themes

To use a color theme, you can pass a theme name to the FileIcon constructor

const fileIcon = new FileIcon({ theme: 'purple' });

or use the setColorTheme method.

fileIcon.setColorTheme('purple');

Currently there are the following themes supported:

| Name | Solid | Outline (add '-outline') | | ------------------- | ----------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | | greyscale (default) | | | | black | | | | white | | | | red | | | | purple | | | | blue | | | | lightBlue | | | | green | | | | yellow | | | | orange | | |

Colors

To add your own custom colors, you can pass a color object into the FileIcon constructor or use the setColors method.

const colors = {
  bg: 'transparent',
  iconBg: 'coral',
  textBg: 'rgba(250,250,250,0.2)',
  text: '#FFF',
  outline: 'white',
};
const fileIcon = new FileIcon({ colors: colors });

Note that you can use Hexcolor, a color name or an rgb value

This will produce a file icon like so:

Sample Tests

See test.html for more examples

License

This project is licensed under the MIT license see the LICENSE.md file for details