last icon

last icon

تحميل الخط

2.2.0

تنزيل

الأخير

آخر مكتبة أيقونة ستحتاجها على الإطلاق.

الميزات الرئيسية:

تحميل كأيقونات SVG أو الخط
مجموعات أيقونة Mix & Match إذا لزم الأمر
أحضر أيقوناتك الخاصة
إصلاح الرموز
كسول تحميل الرموز الخاصة بك

كيفية استخدام

ببساطة تضمين المكتبة

 < script src =" last-icon.js " > </ script >

ملاحظة: يوصى بتحديد هذا في أقرب وقت ممكن بحيث يتم حل جميع الرموز في أقرب وقت ممكن. خلاف ذلك ، قد ترى تأخيرًا قبل عرض الرموز. حتى عند القيام بذلك ، قد لا تزال ترى تأخيرًا صغيرًا جدًا على عكس أيقونة الخط أو SVG مضمن.

إذا كنت على ما يرام مع تأخير مزيد من التأخير ، يمكنك استخدام هذا بدلاً من ذلك (والتي سيتم تجاهلها على المتصفحات التي لا تدعم الوحدات النمطية):

 <!-- preload helps displaying things as early as possible, doesn't work in firefox and safari -->
< link rel =" modulepreload " href =" last-icon.js " />
< script type =" module " src =" ./last-icon.js " > </ script >

واتصل برموزك!

 < l-i name =" star " > </ l-i >
< l-i name =" star " set =" tb " > </ l-i >
< l-i name =" star " size =" 32 " set =" tb " > </ l-i >

< l-i name =" star " set =" bx " type =" solid " > </ l-i >
< l-i name =" star " set =" bx " type =" regular " > </ l-i >
< l-i name =" github " set =" bx " type =" logos " > </ l-i >

ينصح CSS التالية:

 l-i {
  --size : 1 em ;
  display : inline-flex;
  width : var ( --size );
  height : var ( --size );
  vertical-align : middle;
}
l-i svg {
  display : block;
  width : 100 % ;
  height : 100 % ;
}
p l-i ,
button l-i ,
a l-i ,
span l-i {
  vertical-align : -0.125 em ;
}

تكوين

يمكنك تعيين أي خيارات باستخدام LastIcon.configure . الطريقة الموصى بها للاتصال بها هي بهذه الطريقة:

 customElements . whenDefined ( "l-i" ) . then ( ( ) => {
  // Access through registry
  customElements . get ( "l-i" ) . configure ( {
    debug : true ,
    // Transform stars to trash
    // replaceName: {
    //   star: "trash"
    // },
    // Use font icon
    // fonts: [
    //   "material",
    //   "phosphor",
    // ],
    // Change default set
    defaultSet : "tabler" ,
    // Change default stroke
    // defaultStroke: 1,
  } ) ;
} ) ;

جميع الخيارات المتاحة:

اسم	يكتب	وصف
تصحيح	`Boolean`	هل يجب أن نخرج الرسائل إلى وحدة التحكم
كسول	`Boolean`	تحميل الرموز بتكاسل
الاستبدال	`Object`	استبدال الرموز بشفافية بقيم أخرى
الخطوط	`Array`	يعرض الرمز باستخدام أيقونات الخط بدلاً من SVG
الافتراضي	`String`	مجموعة الأيقونة الافتراضية
مجموعات	`Object.<string, IconSet>`	الرموز المتاحة

مجموعات أيقونة مدعومة

مجموعة الأيقونة	اسم	الاسم المستعار	الأنواع	سكتة دماغية	عدد	موقع إلكتروني
رموز bootstrap	bootstrap	بكالوريوس	1	x	1800+	bootstrap
أعلام	أعلام	فلوريدا	1	x	؟	أعلام
fontawesome	fontawesome	فا	5	x	1600+	fontawesome
iconoir	iconoir	في	1	x	1600+	iconoir
iconpark	iconpark	IP	4	الخامس	2400+	iconpark
sucide	sucide	لو	1	الخامس	1800+	sucide
أيقونات المواد	مادة	مي	5	x	1100+	أيقونات المواد
الفسفور	الفسفور	PH	6	x	9000+	الفسفور
أيقونات صغيرة للغاية	Supertiny	شارع	1	x	386	Supertiny
رموز المواد	الرموز	آنسة	3	الخامس	2500+	رموز المواد
أيقونات Tableer	تابلر	تي	1	الخامس	5700+	تابلر

إضافة أو تحديث مجموعة رمز

يمكنك تحديث أي خيار لمجموعة رمز

اسم	يكتب	وصف
الاسم المستعار	`String`	رسالتين قصيرتين اسم مستعار
SVGPATH	`function`	مسار SVG
[FixFill]	`Boolean`	هل تحتاج هذه المجموعة إلى إصلاح `fill:currentColor` ؟
[Usestroke]	`String`	أضف السكتة الدماغية إلى SVG
[الافتراضي السداد]	`String`	السكتة الافتراضية للاستخدام (إذا دعم السكتة الدماغية)
[defaulttype]	`String`	النوع الافتراضي للاستخدام (عندما يكون هناك أنواع متعددة)
[البادئات]	`Object.<string, string>`	أنواع البادئات
[fontclass]	`function`	فئة الخط
[OpticalFont]	`Boolean`	هل الخط البصري؟
[اسم]	`String`	الاسم الكامل (تم حقنه تلقائيًا)

يملأ

تتضمن بعض مجموعات الأيقونات fill="currentColor" والبعض الآخر لا. من أجل أن تتصرف جميع مجموعات الأيقونات باستمرار ، نطبق fill="currentColor" على جميع مجموعات الأيقونات. ينطبق هذا الإصلاح على: "المواد" ، "fontawomeom".

لماذا عنصر مخصص

تقوم العفريت أو الخط الخارجي بتحميل جميع الرموز التي تؤدي إلى وقت تحميل إضافي
إن SVG يؤدي إلى HTML طويل للغاية وليس ودية للغاية للمطور
لا حاجة إلى JS inliner مخصصة ، فهي تشعر أنظف بشكل عام

لماذا CSS الخارجية

لا يتم تحميل العنصر المخصص CSS حتى يتم تحميل المكون نفسه ، مما قد يؤدي إلى FOUC والأشياء تتحرك مع ظهور الرمز. الحل الذي وجدته حتى الآن هو تطبيق بعض قواعد CSS العالمية مما هو معروف قبل تحميل المكون.

يمكنك التحقق من أي SCS الإضافية التي قد تكون مفيدة لك أيضًا.

باستخدام الخطوط

في بعض الأحيان يكون من الأسهل استخدام خط أيقونة. في الواقع ، يتم تخزينه مؤقتًا بالكامل بواسطة المتصفح ولن يكون لديه أي خلل في العرض. من الواضح أن الجانب السلبي هو أنه يتعين عليك تحميل الخط بأكمله ، ولكن يتم تخزينه مؤقتًا بعد الحمل الأول. ميزة استخدام LastIcon عبر الرموز العادية هي أن يتيح لك التبديل بسهولة بين بطريقة أو بأخرى.

بادئ ذي بدء ، قم بتحميل أي نمط خطوط ذات صلة

 < link href =" https://fonts.googleapis.com/icon?family=Material+Icons " rel =" stylesheet " />
< link href =" https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone " rel =" stylesheet " />
< link href =" https://fonts.googleapis.com/icon?family=Material+Icons+Sharp " rel =" stylesheet " />
< link href =" https://fonts.googleapis.com/icon?family=Material+Icons+Round " rel =" stylesheet " />
< link href =" https://fonts.googleapis.com/icon?family=Material+Icons+Outlined " rel =" stylesheet " />

وبعد ذلك ، استخدم تكوين الخط لإخبار الأيقونة الأخيرة لاستخدام الخط فوق أيقونات SVG

 customElements . whenDefined ( "l-i" ) . then ( ( ) => {
  // Access through registry
  customElements . get ( "l-i" ) . configure ( {
    debug : true ,
    fonts : [ "material" ] ,
    material : {
      defaultType : "two-tone" ,
    } ,
  } ) ;
} ) ;

ثم ، قم بتحديث أنماطك:

 l-i {
  --size : 1 em ;
  display : inline-flex;
  width : var ( --size );
  height : var ( --size );
  vertical-align : middle;

  svg {
    display : block;
    width : 100 % ;
    height : 100 % ;
  }
  i {
    font-size : var ( --size ) !important ;
    color : currentColor;
  }
}
p ,
button ,
a ,
span {
  l-i {
    vertical-align : -0.125 em ;
  }
}

. material-icons-two-tone {
  background-color : currentColor;
  -webkit-background-clip : text;
  -webkit-text-fill-color : transparent;
}