file icons js

@exuanbo/file-icons-js

أيقونات خاصة بالملفات للمشروع الأمامي ، المستخرجة من ملفات الملفات/الذرة

جدول المحتويات

• العرض التوضيحي
• وصف
• ما هو مدرج
• تثبيت
• الاستخدام
  • CSS
    • محلي
    • مع خطوط CDN و Web
    • تخصيص
  • جافا سكريبت
    • 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

مرجع رمز

• ملفات الملفات
• 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

أضف علامة ارتباط إلى الرأس ، أو @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

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/في انتظار

اسم

اكتب: 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']} 

شكر وتقدير

• ملفات الملفات/الذرة

تودو

• دعم CDN
• الموقع التجريبي
• إصدار WebFont من CSS
• وحدة ES

رخصة

معهد ماساتشوستس للتكنولوجيا

يتبرع