الأداء
تصف هذه الصفحة أثر الحزم على حجم الحزمة وتكلفة التشغيل، وكيفية عرض عدد كبير من الأيقونات.
كيف تُحمَّل الأيقونات وتعمل
- وحدة لكل أيقونة. وحدات الأيقونات خالية من الآثار الجانبية، فتزيل أدوات التجميع الأيقونات التي لا تستوردها. بعد التصغير والضغط بـ gzip، تضيف أول أيقونة React أو Vue نحو 4 كيلوبايت، بما في ذلك وقت التشغيل المشترك، وتضيف كل أيقونة لاحقة نحو 0.6 كيلوبايت.
- شيفرة مُعدّة مسبقا. تُشحن وضعية السكون كنص جاهز، فلا تحتاج إلى أي حساب قبل أول رسم، على الخادم أو في المتصفح.
- حركة عند الطلب. لا تعمل شيفرة الحركة إلا أثناء تحرك الأيقونة، وتتوقف عند انتهائها.
- شيفرة مشتركة. تتشارك كل الأيقونات وحدة هندسة واحدة، وتتشارك الأيقونات المتحركة بيئة تشغيل واحدة، فتخزّن المتصفحات وشبكات CDN هذه الشيفرة مرة واحدة.
- ألوان CSS. تغيير لون صفحة من الأيقونات يتم بتعديل CSS واحد ولا يعيد رسمها.
مجموعات الأيقونات الكبيرة
تستخدم كل أيقونة مرشحات SVG للظل والإضاءة. إذا عرضت مئات الأيقونات، فارسم الصفوف المرئية فقط، أو استخدم ملفات SVG الثابتة في وسوم <img>، إذ يحوّلها المتصفح إلى صورة نقطية مرة واحدة.
الاستيراد المباشر
غالبا ما تحمّل خوادم التطوير فهرس الحزمة بالكامل، وهو يشير إلى كل أيقونة. لتجنب ذلك، استورد كل أيقونة من ملفها الخاص:
ts
import Folder from "kubai-icons-react/icons/folder";