file icons js

@ exuanbo / file-icons-js

Icônes spécifiques au fichier pour le projet frontal, extraites des icônes de fichiers / atomes

Table des matières

• Démo
• Description
• Ce qui est inclus
• Installation
• Usage
  • CSS
    • Locale
    • Avec des polices CDN et Web
    • Personnaliser
  • Javascrip
    • Node.js
      • 1. Module CJS
      • 2. Module ES
    • Navigateur
      • 1. Module de navigation
      • 2. Module ES
  • Référence de l'API
    • nom
    • options
      • options.color
      • options.
    • Exemple
• Reconnaissance
• FAIRE
• Licence

Démo

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

C'est aussi un modèle de démarrage à utiliser dans le navigateur

Description

• CSS avec des polices auto-hébergées et des polices Web
• Javascript pour obtenir des cours par nom de fichier avec extension, nom de répertoire spécifique et nom du langage de programmation

Ce qui est inclus

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

Ou télécharger à partir des sorties github

Usage

Similaire à font-awesome ,

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

La liste complète des cours disponibles peut être trouvée dans

• styles/icons.less
• styles/colors.less

Référence à l'icône

• Icônes de fichiers
• Fontawesome 4.7.0
• Mfizz
• Farine

CSS

dist/css
├── file-icons-cdn.css
├── file-icons-cdn.min.css
├── file-icons.css
└── file-icons.min.css

Ajoutez une balise de lien à la tête, ou @import

Locale

dist/css/file-icons.min.css

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

Avec des polices CDN et 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 " >

dans quelle url est éloignée,

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

Ou entièrement en utilisant CDN,

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

Personnaliser

Par défaut,

. 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;
}

Javascrip

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. Module CJS

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

2. Module ES

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

Navigateur

1. Module de navigation

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 >

Créez ensuite une instance,

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

2. Module 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 >

Référence de l'API

getClass(name, options?)

Return Promise<string|string[]>

Remarque : Cette méthode est basée sur la promesse depuis la version 3, et compatible avec Async / Await

nom

Type: String

Acceptez le nom du fichier avec l'extension comme 'index.js' , nom de répertoire spécifique comme 'node_modules' ou '.github' , le nom du langage de programmation comme 'Javascript'

La chaîne s'est terminée par / sera considérée comme un répertoire, par exemple '.emacs.d/'

options

Type: Object

options.color

Type: boolean
Par défaut: true

Les classes retournées contiennent une couleur 'icon js-icon medium-yellow'

options.

Type: boolean
Par défaut: false

Renvoie un tableau de chaîne ['icon', 'js-icon', 'medium-yellow']

Exemple

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

Reconnaissance

• ICons de fichiers / atome

FAIRE

• Prise en charge du CDN
• site de démonstration
• Version WebFont de CSS
• Module ES

Licence

Mit

Faire un don