تضمين أيقونات SVG المباشرة | مكتبة الأيقونات في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

إذا كان موقعك العام لا يستخدم سوى خمس أو ست أيقونات فقط، فإن تحميل ملف خط كامل يتجاوز مئة كيلوبايت يُعد هدراً غير مبرر للشبكة. البديل الاحترافي الأسرع أداءً هو نسخ شيفرة <svg> الخاصة بالأيقونة المطلوبة ولصقها مباشرة في مكانها داخل HTML.

تتميز أيقونة <svg> المباشرة بعدم انتظار طلب خط خارجي وبضبط خاصية fill="currentColor" افتراضياً، فتلون مساراتها تلقائياً بلون النص المحيط بها في اللحظة الأولى لظهور الصفحة.

الصف 2 كود برمجي

HTML

<p class="h4">
  <svg xmlns="http://www.w3.org/2000/svg"
    width="20" height="20" fill="currentColor"
    class="bi bi-circle-fill" viewBox="0 0 16 16"
    aria-hidden="true">
    <circle cx="8" cy="8" r="8"/>
  </svg>
  Zero-Latency Inline SVG
</p>

جرّب بنفسك

الصف 3 ملاحظة هامة

Inline Vector SVG Icons تضمين أيقونات SVG المباشرة

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (مكتبة الأيقونات في بوتستراب 5)