file icons jsダウンロード - file icons jsソースコードダウンロード

file icons js

フォントのダウンロード

v3.3.0

ダウンロード

@exuanbo/file-icons-js

File-Icons/Atomから抽出されたフロントエンドプロジェクトのファイル固有のアイコン

デモ
説明
含まれているもの
インストール
使用法
- CSS
  - 地元
  - CDNとWebフォント付き
  - カスタマイズ
- JavaScript
  - node.js
    - 1。CJSモジュール
    - 2。ESモジュール
  - ブラウザ
    - 1。ブラウスライドモジュール
    - 2。ESモジュール
- APIリファレンス
  - 名前
  - オプション
    - options.color
    - Options.Array
  - 例
了承
トト
ライセンス

デモ

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

また、ブラウザで使用するためのスターターテンプレートでもあります

説明

自己ホストフォントとWebフォントを備えたCSS
拡張機能、特定のディレクトリ名、およびプログラミング言語名でファイル名でクラスを取得するための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
デビコン

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以降の約束に基づいており、Async/awaitと互換性があります

名前

タイプ： String

'index.js'として拡張機能のファイル名を受け入れ、特定のディレクトリ名は'node_modules'または'.github'として、 'Javascript'として言語名をプログラミングします

文字列は、 / eg '.emacs.d/'で終了します。

オプション

タイプ： Object

options.color

タイプ： boolean
デフォルト： true

返されたクラスには、色の'icon js-icon medium-yellow'が含まれています

Options.Array

タイプ： 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']}