@exuanbo/file-icons-js

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


!Icons preview

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

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

``shell
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

`shell
npm i @exuanbo/file-icons-js
`

Or download from Github Releases

Usage

Similar to font-awesome,

`html

`

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

$3

!css gzip size

`shell
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

`html

`

#### With CDN and Web Fonts

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

`html

`

in which url is remote,

`css
@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,

`html

`

#### Customize

By default,

`css
.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;
}
`

$3

!js gzip size

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

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

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

#### Node.js

##### 1. CJS Module

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

##### 2. ES Module

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

#### Browser

##### 1. Browserified Module

dist/js/file-icons.min.js

`html





`

Then create an instance,

`html

`

##### 2. ES Module

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

`html





`

$3

getClass(name, options?)

Return Promise

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

`javascript
icons.getClass('package.json')
// -> Promise {: "icon npm-icon medium-red"}

icons.getClass('Javascript')
// -> Promise {: "icon js-icon medium-yellow"}

icons.getClass('node_modules', {
array: true
})
// -> Promise {: ['icon', 'node-icon', 'medium-green']}

icons.getClass('node_modules', {
color: false,
array: true
})
// -> Promise {: ['icon', 'node-icon']}
``

Acknowledgement

- file-icons/atom

TODO

- [x] CDN support
- [x] demo site
- [x] webfont version of css
- [x] ES module

License

MIT

Donate