file icons js ดาวน์โหลด - file icons js ซอร์สโค้ดดาวน์โหลด

file icons js

ดาวน์โหลดแบบอักษร

v3.3.0

ดาวน์โหลด

@exuanbo/file-icons-js

ไอคอนเฉพาะไฟล์สำหรับโครงการ front-end ที่แยกออกจากไฟล์ icons/atom

สารบัญ

การสาธิต
คำอธิบาย
สิ่งที่รวมอยู่ด้วย
การติดตั้ง
การใช้งาน
- CSS
  - ท้องถิ่น
  - ด้วย CDN และ Web Fonts
  - ปรับแต่ง
- จาวาสคริปต์
  - node.js
    - 1. โมดูล CJS
    - 2. โมดูล ES
  - เบราว์เซอร์
    - 1. โมดูลเบราว์เซอร์
    - 2. โมดูล ES
- การอ้างอิง API
  - ชื่อ
  - ตัวเลือก
    - ตัวเลือกสี
    - ตัวเลือกอาร์เรย์
  - ตัวอย่าง
การรับทราบ
สิ่งที่ต้องทำ
ใบอนุญาต

การสาธิต

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

นอกจากนี้ยังเป็นแม่แบบเริ่มต้นสำหรับใช้ในเบราว์เซอร์

คำอธิบาย

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

การอ้างอิงไอคอน

file-icons
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 และ Web Fonts

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

ตัวเลือกสี

ประเภท: 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']}