تحويل SVG إلى مكوّن Vue

لماذا نحوّل SVG إلى مكوّن Vue بدل استيراده كما هو؟

يتيح مكوّن Vue مخصّص لأيقونة إعادة استخدامها بسهولة في أي مكان من المشروع، وتمرير فئات أو أنماط (اللون والحجم) إليها من أي مكوّن أب، والاستفادة من تلوين الشيفرة والتحقق منها في محرّرك كما مع أي مكوّن Vue آخر.

هل يتطلب Vue تحويل السمات إلى camelCase كما في React؟

لا، فخلافًا لـ React/JSX، تقبل قوالب Vue سمات kebab-case (stroke-width وfill-rule...) كما هي دون تحويل، ولا يُضاف سوى v-bind="$attrs" لإتاحة تخصيص المكوّن عند الاستخدام.

هل يمكنني تغيير لون الأيقونة من المكوّن الأب؟

إذا كان ملف SVG يستخدم fill="currentColor" (كما في المثال)، فإن لون نص CSS المحيط يُطبَّق تلقائيًا على الأيقونة: يكفي تغيير خاصية CSS color في العنصر الأب لإعادة تلوين الأيقونة دون المساس بالمكوّن.

يبقى ملف SVG الخاص بك خاصًا: يجري التحويل إلى مكوّن Vue بالكامل داخل متصفحك، دون إرسال أي شيء إلى خادم.