file icons js 다운로드 - file icons js 소스 코드 다운로드

file icons js

글꼴 다운로드

v3.3.0

다운로드

@exuanbo/file-icons-js

파일 아이콘/원자에서 추출한 프론트 엔드 프로젝트의 파일 별 아이콘

데모
설명
포함 된 내용
설치
용법
- CSS
  - 현지의
  - CDN 및 웹 글꼴로
  - 사용자 정의하십시오
- 자바 스크립트
  - node.js
    - 1. CJS 모듈
    - 2. ES 모듈
  - 브라우저
    - 1. 브라우저 화 된 모듈
    - 2. ES 모듈
- API 참조
  - 이름
  - 옵션
    - 옵션 .color
    - 옵션
  - 예
승인
TODO
특허

데모

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

또한 브라우저에서 사용하기위한 스타터 템플릿이기도합니다

설명

자체 주최 글꼴 및 웹 글꼴이있는 CS
확장자, 특정 디렉토리 이름 및 프로그래밍 언어 이름으로 파일 이름으로 클래스를 받기위한 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

Head 또는 @import 에 링크 태그를 추가하십시오

현지의

dist/css/file-icons.min.css

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

CDN 및 웹 글꼴로

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

자바 스크립트

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' 로 프로그래밍합니다.

문자열은 / 로 간주됩니다. 예를 들어 '.emacs.d/'

옵션

유형 : Object

옵션 .color

유형 : 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']}