https://github.com/exuanbo/file-icons-js
File-specific icons extracted from https://github.com/file-icons/atom
https://github.com/exuanbo/file-icons-js
css file-icons fonts icon-fonts icons javascript woff2
Last synced: about 2 months ago
JSON representation
File-specific icons extracted from https://github.com/file-icons/atom
- Host: GitHub
- URL: https://github.com/exuanbo/file-icons-js
- Owner: exuanbo
- License: mit
- Created: 2020-03-29T05:54:21.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2025-03-11T14:07:12.000Z (3 months ago)
- Last Synced: 2025-04-13T17:11:31.255Z (about 2 months ago)
- Topics: css, file-icons, fonts, icon-fonts, icons, javascript, woff2
- Language: JavaScript
- Homepage:
- Size: 1.85 MB
- Stars: 11
- Watchers: 1
- Forks: 10
- Open Issues: 49
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @exuanbo/file-icons-js
> File-specific icons for front-end project, extracted from [file-icons/atom](https://github.com/file-icons/atom)
[](https://www.npmjs.com/package/@exuanbo/file-icons-js)
[](https://standardjs.com)
[](https://travis-ci.com/github/exuanbo/file-icons-js)
[](https://david-dm.org/exuanbo/file-icons-js)
[](https://github.com/exuanbo/file-icons-js/blob/master/LICENSE)
## Table of Contents
- [Demo](#demo)
- [Description](#description)
- [What's included](#whats-included)
- [Installation](#installation)
- [Usage](#usage)
- [CSS](#css)
- [Local](#local)
- [With CDN and Web Fonts](#with-cdn-and-web-fonts)
- [Customize](#customize)
- [JavaScript](#javascript)
- [Node.js](#nodejs)
- [1. CJS Module](#1-cjs-module)
- [2. ES Module](#2-es-module)
- [Browser](#browser)
- [1. Browserified Module](#1-browserified-module)
- [2. ES Module](#2-es-module-1)
- [API Reference](#api-reference)
- [name](#name)
- [options](#options)
- [options.color](#optionscolor)
- [options.array](#optionsarray)
- [Example](#example)
- [Acknowledgement](#acknowledgement)
- [TODO](#todo)
- [License](#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](https://github.com/exuanbo/file-icons-js/releases)
## Usage
Similar to [`font-awesome`](https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself),
```html
```
Full list of available classes can be found in
- [`styles/icons.less`](./styles/icons.less)
- [`styles/colors.less`](./styles/colors.less)
Icon reference
- [File-Icons](https://github.com/file-icons/icons/blob/master/charmap.md)
- [FontAwesome 4.7.0](https://fontawesome.com/v4.7.0/cheatsheet/)
- [Mfizz](https://github.com/file-icons/MFixx/blob/master/charmap.md)
- [Devicons](https://github.com/file-icons/DevOpicons/blob/master/charmap.md)
### CSS
```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;
}
```
### JavaScript
```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
const icons = require('file-icons-js')
```
##### 2. ES Module
`dist/js/file-icons.esm.min.js`
```html
import icons from 'node_modules/@exuanbo/file-icons-js/dist/js/file-icons.esm.min.js'
import icons from 'https://cdn.jsdelivr.net/npm/@exuanbo/file-icons-js@latest/dist/js/file-icons.esm.min.js'
```
### API Reference
`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](https://github.com/file-icons/atom)
## TODO
- [x] CDN support
- [x] demo site
- [x] webfont version of css
- [x] ES module
## License
[MIT](https://github.com/exuanbo/file-icons-js/blob/master/LICENSE)
## Donate
