أين ذهبت أسهمي؟ حكاية sprite في astro-icon

اختفت كل أيقونة pixelarticons:arrow-right في هذا الموقع في يوم واحد — بينما ظلّت arrow-left تُعرَض بشكل سليم. لا أخطاء، ولا طلبات مفقودة. مجرّد مربّعات فارغة.

الآلية

يزيل astro-icon تكرار الأيقونات على مستوى الصفحة: فأوّل تصيير لاسمٍ ما يُصدر تعريف <symbol>، وكل تصيير لاحق يُصدر مجرّد <use href="#...">. وترتيب المستند هو ما يحدّد مَن يكون الأوّل.

في هذا الموقع، كانت أوّل arrow-right تقع داخل القائمة الجانبية للهواتف — وهي جزيرة Astro تسلّم محتوى فتحتها داخل <template data-astro-template> خامل حتى لحظة الإماهة. وعلى سطح المكتب لا تُماه تلك الجزيرة أبدًا، فلا يدخل الرمز إلى DOM الحيّ إطلاقًا، وتصبح مراجع <use> الثماني والعشرون كلها بلا هدف.

<template data-astro-template="workPanel">
  <svg data-icon="pixelarticons:arrow-right">
    <symbol id="ai:pixelarticons:arrow-right">…</symbol>
    <use href="#ai:pixelarticons:arrow-right" />
  </svg>
</template>

<!-- في كل مكان آخر من الصفحة -->
<svg data-icon="pixelarticons:arrow-right">
  <use href="#ai:pixelarticons:arrow-right" /> <!-- لا يشير إلى شيء -->
</svg>

الحل

التضمين الجزئي لا يمكن أن ينجح — فحتى التصييرات المضمّنة تُقدّم العدّاد الخاص بكل اسم. والسياسة المتّسقة الوحيدة هي مُغلِّف محلي Icon.astro يفرض is:inline في كل مكان، مقايضةً ببضعة كيلوبايتات من أجسام SVG المتكرّرة — وهي عالية القابلية للضغط — مقابل الصحّة.

الدرس: أي إزالة تكرار تعتمد على ترتيب المستند تصبح غير سليمة في اللحظة التي يصير فيها جزء من مستندك قالبًا.