file icons js Unduh - file icons js Sumber Download

file icons js

Pengunduhan font

v3.3.0

Unduh

@exuanbo/file-icons-js

Ikon khusus file untuk proyek front-end, diekstraksi dari file-ikon/atom

Daftar isi

Demo
Keterangan
Apa yang termasuk
Instalasi
Penggunaan
- CSS
  - Lokal
  - Dengan CDN dan font web
  - Menyesuaikan
- Javascript
  - Node.js
    - 1. Modul CJS
    - 2. Modul ES
  - Browser
    - 1. Modul Browserifikasi
    - 2. Modul ES
- Referensi API
  - nama
  - opsi
    - opsi.color
    - opsi.array
  - Contoh
Pengakuan
Todo
Lisensi

Demo

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

Ini juga merupakan templat pemula untuk digunakan di browser

Keterangan

CSS dengan font yang diselenggarakan sendiri dan font web
JavaScript untuk mendapatkan kelas dengan nama file dengan ekstensi, nama direktori tertentu dan nama bahasa pemrograman

Apa yang termasuk

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

Instalasi

npm i @exuanbo/file-icons-js

Atau unduh dari rilis GitHub

Penggunaan

Mirip dengan font-awesome ,

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

Daftar lengkap kelas yang tersedia dapat ditemukan di

styles/icons.less
styles/colors.less

Referensi Ikon

ICON file
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

Tambahkan tag tautan ke head, atau @import

Lokal

dist/css/file-icons.min.css

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

Dengan CDN dan font web

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

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

di mana url jauh,

 @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" );
}

Atau sepenuhnya menggunakan CDN,

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

Menyesuaikan

Secara default,

. icon : before {
  font-weight : normal;
  font-style : normal;
  text-align : center;
  width : 16 px ;
  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. Modul CJS

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

2. Modul ES

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

Browser

1. Modul Browserifikasi

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 >

Kemudian buat instance,

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

2. Modul ES

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 >

Referensi API

getClass(name, options?)

Return Promise<string|string[]>

Catatan : Metode ini berbasis janji sejak versi 3, dan kompatibel dengan async/waait

nama

Ketik: String

Terima nama file dengan ekstensi sebagai 'index.js' , nama direktori spesifik sebagai 'node_modules' atau '.github' , nama bahasa pemrograman sebagai 'Javascript'

String diakhiri dengan / akan dianggap sebagai direktori, misalnya '.emacs.d/'

opsi

Jenis: Object

opsi.color

Jenis: boolean
Default: true

Kelas yang dikembalikan berisi warna 'icon js-icon medium-yellow'

opsi.array

Jenis: boolean
Default: false

Mengembalikan array string ['icon', 'js-icon', 'medium-yellow']

Contoh

 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']}