@exuanbo/file-icons-js

File-specific icons for front-end project, extracted from file-icons/atom

Table of Contents

• Demo
• Description
• What's included
• Installation
• Usage
  • CSS
    • Local
    • With CDN and Web Fonts
    • Customize
  • JavaScript
    • Node.js
      • 1. CJS Module
      • 2. ES Module
    • Browser
      • 1. Browserified Module
      • 2. ES Module
  • API Reference
    • name
    • options
      • options.color
      • options.array
    • Example
• Acknowledgement
• TODO
• License

Demo

https://exuanbo.github.io/file-icons-js/

It's also a starter template for using in browser

Description

• CSS with self-hosted fonts and web fonts
• JavaScript for getting classes by file name with extension, specific directory name and programming language name

What's included

dist
├── css
│   ├── file-icons-cdn.css
│   ├── file-icons-cdn.min.css
│   ├── file-icons.css
│   └── file-icons.min.css
├── fonts
│   ├── devopicons.woff2
│   ├── file-icons.woff2
│   ├── fontawesome.woff2
│   ├── mfixx.woff2
│   └── octicons.woff2
└── js
    ├── file-icons.esm.js
    ├── file-icons.esm.min.js
    ├── file-icons.js
    └── file-icons.min.js
 
3 directories, 13 files

Installation

npm i @exuanbo/file-icons-js

Or download from Github Releases

Usage

Similar to font-awesome,

<i class="icon css3-icon medium-blue"></i>

Full list of available classes can be found in

• styles/icons.less
• styles/colors.less

Icon reference

• File-Icons
• FontAwesome 4.7.0
• Mfizz
• Devicons

CSS

dist/css
├── file-icons-cdn.css
├── file-icons-cdn.min.css
├── file-icons.css
└── file-icons.min.css

Add a link tag to head, or @import

Local

dist/css/file-icons.min.css

<link href="node_modules/@exuanbo/file-icons-js/dist/css/file-icons.min.css" rel="stylesheet">

With CDN and Web Fonts

dist/css/file-icons-cdn.min.css

<link href="node_modules/@exuanbo/file-icons-js/dist/css/file-icons-cdn.min.css" rel="stylesheet">

in which url is remote,

@font-face {
  font-family: "file-icons";
  font-weight: normal;
  font-style: normal;
  src: url("https://cdn.jsdelivr.net/npm/@exuanbo/file-icons-js@latest/fonts/file-icons.woff2") format("woff2");
}

Or entirely using CDN,

<link href="https://cdn.jsdelivr.net/npm/@exuanbo/file-icons-js@latest/dist/css/file-icons.min.css" rel="stylesheet">

Customize

By default,

.icon:before {
  font-weight: normal;
  font-style: normal;
  text-align: center;
  width: 16px;
  line-height: 1;
  position: relative;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
}

JavaScript

dist/js
├── file-icons.esm.js
├── file-icons.esm.min.js
├── file-icons.js
└── file-icons.min.js

// package.json
{
  "main": "./dist/js/file-icons.js",
  "module": "./dist/js/file-icons.esm.js",
  "browser": "./dist/js/file-icons.min.js"
}

// dist/js/file-icons.esm.js
var main = new FileIcons();
export default main;

Node.js

1. CJS Module

const icons = require('@exuanbo/file-icons-js')

2. ES Module

import icons from '@exuanbo/file-icons-js'

Browser

1. Browserified Module

dist/js/file-icons.min.js

<!-- Locally -->
<script src="node_modules/@exuanbo/file-icons-js/dist/js/file-icons.min.js"></script>
 
<!-- With CDN -->
<script src="https://cdn.jsdelivr.net/npm/@exuanbo/file-icons-js@latest/dist/js/file-icons.min.js"></script>

Then create an instance,

<script>
  const icons = require('file-icons-js')
</script> 

2. ES Module

dist/js/file-icons.esm.min.js

<!-- Locally -->
<script type="module">
  import icons from 'node_modules/@exuanbo/file-icons-js/dist/js/file-icons.esm.min.js'
</script> 
 
<!-- With CDN -->
<script type="module">
  import icons from 'https://cdn.jsdelivr.net/npm/@exuanbo/file-icons-js@latest/dist/js/file-icons.esm.min.js'
</script> 

API Reference

getClass(name, options?)

Return Promise<string|string[]>

Note: this method is Promise based since version 3, and compatible with async/await

name

Type: String

Accept file name with extension as 'index.js', specific directory name as 'node_modules' or '.github', programming language name as 'Javascript'

String ended with / will be considered as directory, e.g '.emacs.d/'

options

Type: Object

options.color

Type: boolean
Default: true

Returned classes contain color 'icon js-icon medium-yellow'

options.array

Type: boolean
Default: false

Return an array of string ['icon', 'js-icon', 'medium-yellow']

Example

icons.getClass('package.json')
// -> Promise {<resolved>: "icon npm-icon medium-red"}
 
icons.getClass('Javascript')
// -> Promise {<resolved>: "icon js-icon medium-yellow"}
 
icons.getClass('node_modules', {
  array: true
})
// -> Promise {<resolved>: ['icon', 'node-icon', 'medium-green']}
 
icons.getClass('node_modules', {
  color: false,
  array: true
})
// -> Promise {<resolved>: ['icon', 'node-icon']}

Acknowledgement

• file-icons/atom

TODO

• CDN support
• demo site
• webfont version of css
• ES module

License

MIT

Donate