Descargar file icons js - file icons js Descargar código fuente

file icons js

Descarga de fuentes

v3.3.0

Descargar

@exuanbo/file-icons-js

Iconos específicos de archivos para el proyecto front-end, extraídos de archivos-icons/átomo

Tabla de contenido

Manifestación
Descripción
¿Qué está incluido?
Instalación
Uso
- CSS
  - Local
  - Con CDN y fuentes web
  - Personalizar
- Javascript
  - Nodo.js
    - 1. Módulo CJS
    - 2. Módulo ES
  - Navegador
    - 1. Módulo navegador
    - 2. Módulo ES
- Referencia de API
  - nombre
  - opción
    - opciones.color
    - opciones. Array
  - Ejemplo
Reconocimiento
HACER
Licencia

Manifestación

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

También es una plantilla de inicio para usar en el navegador

Descripción

CSS con fuentes y fuentes web autohostadas
JavaScript para obtener clases por nombre de archivo con extensión, nombre de directorio específico y nombre del lenguaje de programación

¿Qué está incluido?

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

Instalación

npm i @exuanbo/file-icons-js

O descargar de los lanzamientos de Github

Uso

Similar a font-awesome ,

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

Lista completa de clases disponibles se puede encontrar en

styles/icons.less
styles/colors.less

Referencia de icono

File-Icons
FONTAWESUESS 4.7.0
Mfizz
Devicones

CSS

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

Agregue una etiqueta de enlace a Head, o @import

Local

dist/css/file-icons.min.css

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

Con CDN y fuentes 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 " >

en el que url es remota,

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

O utilizando completamente CDN,

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

Personalizar

Por defecto,

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

Nodo.js

1. Módulo CJS

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

2. Módulo ES

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

Navegador

1. Módulo navegador

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 >

Luego crea una instancia,

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

2. Módulo 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 >

Referencia de API

getClass(name, options?)

Return Promise<string|string[]>

NOTA : Este método es prometido basado desde la versión 3, y compatible con Async/APear

nombre

Tipo: String

Acepte el nombre del archivo con extensión como 'index.js' , nombre de directorio específico como 'node_modules' o '.github' , Nombre del lenguaje de programación como 'Javascript'

La cadena terminó con / se considerará como directorio, por ejemplo '.emacs.d/'

opción

Tipo: Object

opciones.color

Tipo: boolean
Valor predeterminado: true

Las clases devueltas contienen color 'icon js-icon medium-yellow'

opciones. Array

Tipo: boolean
Valor predeterminado: false

Devuelve una matriz de cadena ['icon', 'js-icon', 'medium-yellow']

Ejemplo

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