Initial commit

.eslintignore

@@ -0,0 +1,3 @@
+scripts/
+dist/
+node_modules/

.eslintrc

@@ -0,0 +1,12 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ]
+}

.github/workflows/ci.yml

@@ -0,0 +1,17 @@
+name: ci
+
+on: [push, pull_request]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+      with:
+        persist-credentials: false
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 14
+    - run: git config --global url."https://github.com/".insteadOf ssh://[email protected]/
+    - run: npm ci
+    - run: npm run lint

.github/workflows/release.yml

@@ -0,0 +1,22 @@
+name: release
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          persist-credentials: false
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+          registry-url: https://registry.npmjs.org/
+      - run: git config --global url."https://github.com/".insteadOf ssh://[email protected]/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+/dist
+/build

CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+## [1.0.0] - 2021-06-02
+- Initial release

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Simon Nilsson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,79 @@
+# material-file-icons
+
+[![npm](https://img.shields.io/npm/v/material-file-icons.svg?style=flat-square)](https://www.npmjs.org/package/material-file-icons)
+[![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.
+
+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.
+
+## Features
+
+- Contains **313** unique icons.
+- Uses **SVG** images that can scale to any dimensions.
+- Can automatically select icon based on file name.
+- All icons a bundled in a single file of about **414 kB** minified.
+- Although primarily focused on file types used in software development, other common file types are also included.
+
+## Install
+
+```sh
+npm install --save material-file-icons
+```
+
+## Usage
+
+```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' }} />
+
+// Renders a blank icon
+<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.
+
+#### 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.|
+
+All other props are passed to the top `<div />` element.
+
+### `Icon`
+The Icon type definition
+```ts
+{
+  name: string,               // The name of the icon e.g. 'javascript'.
+  svg: string,                // The actual SVG content '<svg ...'.
+  extensions: Array<string>?, // List of extensions this Icon should be applied to.
+  files: Array<string>?       // List of complete filenames this icon should be applied to.
+}
+```
+
+### `defaultIcon: Icon`
+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.
+
+### `getAllIcons(): Array<Icon>`
+Returns an array of all available icons.
+
+
+
+## Icons
+
+![](preview.png)
+
+## License
+
+[MIT](LICENSE)

lib/FileIcon.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+import { getIcon, Icon } from './utility';
+
+interface FileIconProps {
+  filename?: string;
+  icon?: Icon
+}
+
+const FileIcon: FC<FileIconProps> = React.memo(({ filename, icon, ...otherProps }) => {
+  let selectedIcon = icon || { svg: '' };
+  if (!icon && filename) {
+    selectedIcon = getIcon(filename);
+  }
+  return <div {...otherProps} dangerouslySetInnerHTML={{ __html: selectedIcon.svg }} />;
+});
+
+export default FileIcon;

lib/index.ts

@@ -0,0 +1,2 @@
+export { default as FileIcon } from './FileIcon';
+export { getIcon, getAllIcons, defaultIcon } from './utility';

lib/utility.ts

@@ -0,0 +1,46 @@
+// 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];
+}