Version 2.0.0

Changed module to be completely framework agnostic.

CHANGELOG.md

@@ -1,7 +1,11 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
-## [1.1.0] - 2021-06-06
+## [2.0.0] - 2021-06-05
+- Breaking: Changed module to be completely framework agnostic.
+- Added examples for React, Vue.js and Svelte.
+
+## [1.1.0] - 2021-06-05
 - 7 new icons
 - Dependency updates
 - Fix preview script

README.md

@@ -4,15 +4,17 @@
 [![build](https://github.com/simonnilsson/material-file-icons/workflows/ci/badge.svg)](https://github.com/simonnilsson/material-file-icons/actions?query=workflow%3Aci+branch%3Amain)
 [![install size](https://packagephobia.com/badge?p=material-file-icons)](https://packagephobia.com/result?p=material-file-icons)
 
-Beautiful material style file type icons in a simple React component.
+Beautiful material style file type icons packaged in a single JavaScript file.
 
 Source of icons is the [Material Icon Theme](https://github.com/PKief/vscode-material-icon-theme) for VS Code. All credit for icon design should go there. This is also the place for placing requests for adding new icons.
 
+> **Version 1.x of this library was React specific, since 2.0 this library is made to be framework agnostic.**
 ## Features
 
+- Zero dependencies.
 - Contains **320** unique icons.
-- Uses **SVG** images that can scale to any dimensions.
 - Can automatically select icon based on file name.
+- Uses **SVG** images that can scale to any dimensions.
 - All icons a bundled in a single file of about **420 kB** minified.
 - Although primarily focused on file types used in software development, other common file types are also included.
 
@@ -22,31 +24,57 @@ Source of icons is the [Material Icon Theme](https://github.com/PKief/vscode-mat
 npm install --save material-file-icons
 ```
 
-## Usage
+## Usage Examples
 
+React:
 ```js
-import { FileIcon, Icon, getIcon, getAllIcons, defaultIcon } from 'material-file-icons';
-
-// Renders a JS icon
-<FileIcon filename='file.js' />
-
-// Renders an audio icon with a black background
-<FileIcon icon={getIcon('file.mp3')} style={{ backgroundColor: 'black' }} />
+import { getIcon } from 'material-file-icons';
+
+function FileIcon({ filename, style, className }) {
+  return <div 
+    style={style}
+    className={className}
+    dangerouslySetInnerHTML={{ __html: getIcon(filename).svg }}
+  />;
+}
 
-// Renders a blank icon
-<FileIcon />
+export default FileIcon;
 ```
 
-### `FileIcon`
-Component for rendering an icon. By default the icon will scale to fit its container. A **style** or **className** prop can be used customize size or other styling.
+Vue:
+```html
+<template>
+  <div v-html="svg"></div>
+</template>
+
+<script>
+  import { getIcon } from 'material-file-icons';
+  export default {
+    name: "FileIcon",
+    props: ["filename"],
+    computed: {
+      svg: function () {
+        return getIcon(this.filename).svg;
+      }
+    }
+  };
+</script>
+```
 
-#### Props
-|Prop name|Type|Description|
-|---|---|---|
-|filename|string?|Select icon automatically using a file name. Should not include file path.|
-|icon|Icon?|Manually specify the icon to use. Has precedence over the filename prop.|
+Svelte:
+```html
+<script>
+  import { getIcon } from 'material-file-icons';
+  export let filename;
+  $: selectedIcon = getIcon(filename);
+</script>
+
+<div class={$$props.class} style={$$props.style}>
+  {@html selectedIcon.svg}
+</div>
+```
 
-All other props are passed to the top `<div />` element.
+## API
 
 ### `Icon`
 The Icon type definition
@@ -63,7 +91,7 @@ The Icon type definition
 The default `file` icon.
 
 ### `getIcon(filename: string): Icon`
-Returns an icon based on filename input. Can be used as prop to FileIcon or for other purposes.
+Returns an icon based on filename input.
 
 ### `getAllIcons(): Array<Icon>`
 Returns an array of all available icons.

lib/index.ts

@@ -1,2 +1,46 @@
-export { default as FileIcon } from './FileIcon';
-export { getIcon, getAllIcons, defaultIcon } from './utility';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import iconDefs from 'icon-definitions';
+
+export interface Icon {
+  name: string;
+  extensions?: string[];
+  files?: string[];
+  svg: string;
+}
+
+const defaultIcon: Icon = iconDefs.defaultIcon;
+export { defaultIcon };
+
+export function getIcon(filename: string): Icon {
+
+  if (typeof filename === 'string') {
+
+    // Check complete filename first
+    let icon = iconDefs.icons.find(i => i.files && i.files.some(f => f.localeCompare(filename, undefined, { sensitivity: 'accent' }) === 0));
+    if (icon) return icon;
+
+    // The extensions, can match multiple which leads to this quite inefficient way of matching.
+    const matches = iconDefs.icons.filter(i => i.extensions && i.extensions.some(ext => filename.endsWith('.' + ext)));
+    if (matches.length > 0) {
+      let matchLength = 0;
+      for (const match of matches) {
+        for (const ext of match.extensions) {
+          if (ext.length > matchLength && filename.endsWith('.' + ext)) {
+            matchLength = ext.length;
+            icon = match;
+          }
+        }
+      }
+    }
+    if (icon) return icon;
+
+  }
+
+  // Finally fall back to default icon
+  return defaultIcon;
+}
+
+export function getAllIcons(): Array<Icon> {
+  return [defaultIcon, ...iconDefs.icons];
+}