file icons js下載 - file icons js源代碼下載

file icons js

字體下載

v3.3.0

下載

@exuanbo/file-icons-js

從文件 - 元素提取的前端項目的特定文件圖標

演示
描述
包括什麼
安裝
用法
- CSS
  - 當地的
  - 帶有CDN和Web字體
  - 定制
- JavaScript
  - node.js
    - 1。 CJS模塊
    - 2。 ES模塊
  - 瀏覽器
    - 1。瀏覽模塊
    - 2。 ES模塊
- API參考
  - 姓名
  - 選項
    - 選項。彩色
    - 選項。陣列
  - 例子
致謝
托多
執照

演示

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

這也是用於瀏覽器中使用的入門模板

描述

具有自托字體和網絡字體的CSS
JavaScript用於通過文件名，帶有擴展名，特定目錄名稱和編程語言名稱的JavaScript

包括什麼

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

安裝

npm i @exuanbo/file-icons-js

或從github發行下載

用法

類似於font-awesome ，

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

可以在

styles/icons.less
styles/colors.less

圖標參考

文件 - 元音
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

將鏈接標籤添加到頭部或@import

當地的

dist/css/file-icons.min.css

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

帶有CDN和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 " >

其中url是遙遠的，

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

或完全使用CDN，

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

定制

默認情況下，

. 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。 CJS模塊

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

2。 ES模塊

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

瀏覽器

1。瀏覽模塊

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 >

然後創建一個實例，

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

2。 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 >

API參考

getClass(name, options?)

返回Promise<string|string[]>

注意：此方法自版本3以來是基於承諾的，並且與異步/等待

姓名

類型： String

接受帶有擴展名的文件名為'index.js' ，特定目錄名稱為'node_modules'或'.github' ，編程語言名稱為'Javascript'

字符串以/將被視為目錄，例如'.emacs.d/'

選項

類型： Object

選項。彩色

類型： boolean
默認值： true

返回的課程包含顏色'icon js-icon medium-yellow'

選項。陣列

類型： boolean
默認值： false

返回字符串['icon', 'js-icon', 'medium-yellow']的數組

例子

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