Nondeterministic Postrequisite Metaprotocol
    Wondering what’s next for npm?Check out our public roadmap! »

    @exuanbo/file-icons-js

    3.3.0 • Public • Published

    @exuanbo/file-icons-js

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

    NPM Version JavaScript Style Guide Travis CI David License

    Icons preview

    Table of Contents

    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

    Icon reference

    CSS

    css gzip size

    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

    js gzip size

    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

    TODO

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

    License

    MIT

    Donate

    Buy Me A Coffee

    Install

    npm i @exuanbo/file-icons-js

    DownloadsWeekly Downloads

    31

    Version

    3.3.0

    License

    MIT

    Unpacked Size

    1.4 MB

    Total Files

    20

    Last publish

    Collaborators

    • avatar