file icons js Download - file icons js Quellcode Download

file icons js

Schriftarten herunterladen

v3.3.0

Herunterladen

@exuanbo/file-icons-js

Dateispezifische Symbole für Front-End-Projekt, extrahiert aus Datei-ICons/Atom

Inhaltsverzeichnis

Demo
Beschreibung
Was ist enthalten
Installation
Verwendung
- CSS
  - Lokal
  - Mit CDN und Web -Schriftarten
  - Anpassen
- JavaScript
  - Node.js
    - 1. CJS -Modul
    - 2. ES -Modul
  - Browser
    - 1. Browserified Modul
    - 2. ES -Modul
- API -Referenz
  - Name
  - Optionen
    - Optionen.Color
    - Optionen.Array
  - Beispiel
Anerkennung
Todo
Lizenz

Demo

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

Es ist auch eine Startervorlage für die Verwendung im Browser

Beschreibung

CSS mit selbst gehosteten Schriftarten und Webschriften
JavaScript zum Erhalten von Klassen nach Dateinamen mit Erweiterung, spezifischem Verzeichnisname und Programmiersprachenname

Was ist enthalten

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

Oder herunterladen von Github -Veröffentlichungen

Verwendung

Ähnlich wie bei font-awesome ,

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

Eine vollständige Liste der verfügbaren Klassen finden Sie in

styles/icons.less
styles/colors.less

Icon Referenz

Datei-ICons
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

Fügen Sie einen Link -Tag zum Kopf oder @import hinzu

Lokal

dist/css/file-icons.min.css

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

Mit CDN und Web -Schriftarten

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 welchem url abgelegen ist,

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

Oder komplett mit CDN,

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

Anpassen

Standardmäßig,

. 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 -Modul

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

2. ES -Modul

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

Browser

1. Browserified Modul

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 >

Dann eine Instanz erstellen,

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

2. ES -Modul

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 -Referenz

getClass(name, options?)

Rückgabeversprechen Promise<string|string[]>

HINWEIS : Diese Methode basiert seit Version 3 und kompatibel mit Async/Assait

Name

Typ: String

Akzeptieren Sie den Dateinamen mit Erweiterung als 'index.js' , spezifischer Verzeichnisname als 'node_modules' oder '.github' , Programmiersprachname als 'Javascript'

Die Zeichenfolge endete / wird als Verzeichnis angesehen, z. B. EG '.emacs.d/'

Optionen

Typ: Object

Optionen.Color

Typ: boolean
Standard: true

Zurückgegebene Klassen enthalten Farbe 'icon js-icon medium-yellow'

Optionen.Array

Typ: boolean
Standard: false

Geben Sie eine Reihe von String ['icon', 'js-icon', 'medium-yellow']

Beispiel

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