طريقة استخدام أيقونات SVG في HTML وCSS وReact وVue

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

1. ربط ملف SVG بوسم <img>

أبسط طريقة هي التعامل مع الأيقونة كأي صورة أخرى. لكل أيقونة في Iconyz رابط SVG عام يظهر في لوحة الأيقونة.

<img src="https://iconyz.com/api/public/svg/lucide/house.svg"
     width="24" height="24" alt="الرئيسية">

يحفظ المتصفح الملف في ذاكرته المؤقتة، ولا تؤخر الأيقونة عرض صفحة HTML أبدًا. لكن عيب هذه الطريقة أن CSS لا يصل إلى داخل الصورة، فلا تؤثر فيها أنماط color و:hover. ويمكنك في الأيقونات أحادية اللون تحديد اللون في الرابط نفسه بإضافة ?color=%23e11d48 (أي اللون #e11d48 بترميز الروابط). اطلع على التفاصيل في دليل واجهة SVG البرمجية.

وفي التطبيقات المنشورة، فكّر في تنزيل ملف SVG وتقديمه من موقعك، حتى لا تعتمد صفحاتك على رابط خارجي.

2. لصق SVG مباشرة في الصفحة

افتح الأيقونة واختر SVG وانسخ الشيفرة مباشرة إلى صفحة HTML:

<button class="btn">
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
       aria-hidden="true">
    <path fill="none" stroke="currentColor" stroke-width="2" d="…"/>
  </svg>
  الرئيسية
</button>

يصبح SVG المضمّن جزءًا من الصفحة، فيتحكم فيه CSS بالكامل: اللون والحجم وحالات التمرير والانتقالات، بل وكل مسار على حدة. وتستخدم المجموعات أحادية اللون currentColor، لذا تأخذ الأيقونة تلقائيًا لون نص العنصر الأب. إنها الطريقة الأكثر مرونة، ولا تحتاج إلى أي طلب HTTP إضافي.

أما الثمن فهو حجم صفحة HTML؛ إذ تضيف كل أيقونة مضمّنة بيانات مساراتها إلى كل صفحة تستخدمها، وهو أمر مهم إذا كررت الأيقونة نفسها مئات المرات، في جدول طويل مثلًا.

3. استخدام الأيقونة من CSS

يحوّل قناع CSS أي ملف SVG أحادي اللون إلى شكل يُملأ بـ background-color، فتتبع الأيقونة لون النص دون أن تضع شيفرتها في HTML:

.icon-home {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("https://iconyz.com/api/public/svg/lucide/house.svg") no-repeat center / contain;
          mask: url("https://iconyz.com/api/public/svg/lucide/house.svg") no-repeat center / contain;
}

<span class="icon-home" aria-hidden="true"></span>

يُنشئ تبويب CSS في لوحة كل أيقونة هذه القاعدة مع تضمين SVG كرابط بيانات (data URI)، فتعمل دون أي طلب خارجي. استخدم الأقنعة مع الأيقونات أحادية اللون فقط، لأن القناع يحتفظ بالشكل ويتجاهل ألوان الأيقونة الأصلية. أما الأيقونات متعددة الألوان فاستخدم معها background-image.

4. React وأطر العمل الأخرى التي تستخدم JSX

يتطلب JSX كتابة السمات بصيغة camelCase (أي strokeWidth بدلًا من stroke-width)، ويمرر الخصائص (props) كما هي. ويُنشئ تبويب React في لوحة كل أيقونة مكوّنًا جاهزًا للاستخدام:

export function HouseIcon(props) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
         viewBox="0 0 24 24" {...props}>
      <path fill="none" stroke="currentColor" strokeWidth={2} d="…" />
    </svg>
  );
}

// طريقة الاستخدام
<HouseIcon className="text-blue-600" style={{ fontSize: 20 }} aria-hidden="true" />

ولأن الحجم 1em، يتغير حجم الأيقونة مع font-size، ولأن اللون currentColor، تغيّر فئات الأدوات مثل text-* في Tailwind لونها. احفظ كل أيقونة في ملف مستقل أو اجمع الأيقونات في وحدة واحدة، حتى تستبعد أداة التجميع ما لا تستورده منها (tree-shaking). ويعمل المكوّن نفسه في Preact، ويوفر تبويب Solid النسخة الخاصة بـ Solid.

5. Vue وSvelte

في Vue، احفظ الأيقونة كمكوّن في ملف واحد. وتنتقل السمات التي تمررها، مثل class، إلى عنصر <svg> الجذر:

<!-- HouseIcon.vue -->
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
    <path fill="none" stroke="currentColor" stroke-width="2" d="…" />
  </svg>
</template>

ويعمل Svelte بالطريقة نفسها: ملف .svelte يحتوي على شيفرة SVG مع {...$$props} على العنصر الجذر. والاثنان متاحان كتبويبات في لوحة الأيقونة.

الحجم واللون

• حدّد الحجم بـ 1em. عندما تضبط العرض والارتفاع على 1em تطابق الأيقونة حجم النص المجاور لها، وتغيّر حجمها بتغيير font-size.
• احتفظ بـ viewBox. تحدد viewBox نظام إحداثيات الرسم، وحذفها يفسد تغيير الحجم؛ لذا غيّر الحجم بالعرض والارتفاع.
• التزم بالشبكة. تبدو الأيقونات المرسومة على شبكة 24px أوضح ما تكون عند 24px أو 48px أو مضاعفاتهما، وقد تبدو الخطوط الرفيعة ضبابية قليلًا عند 18px أو 20px.
• لوّن الأيقونات أحادية اللون بـ color. مع currentColor تكفي قاعدة CSS واحدة للحالة العادية وحالة التمرير والوضع الداكن.
• تحتفظ الأيقونات متعددة الألوان بألوانها. الإيموجي والأعلام والشعارات ألوانها مدمجة فيها. لا تغيّر ألوانها إلا إذا سمح الترخيص بالتعديل، ولا تعدّل شعارات العلامات التجارية أبدًا.

سهولة الوصول

حدد أولًا هل تحمل الأيقونة معنى. الأيقونات الزخرفية المجاورة لنص يجب إخفاؤها عن قارئات الشاشة، أما الأيقونات التي تظهر وحدها فتحتاج إلى بديل نصي:

<!-- زخرفية: للزر نص بالفعل -->
<button><svg aria-hidden="true" …>…</svg> حفظ</button>

<!-- زر بأيقونة فقط: سمِّ الزر وأخفِ الأيقونة -->
<button aria-label="إغلاق"><svg aria-hidden="true" …>…</svg></button>

<!-- صورة تحمل معنى -->
<img src="…/triangle-alert.svg" alt="تحذير">

وتحقق من التباين أيضًا: وفقًا لمعايير WCAG 2.2، تحتاج الأيقونات التي تنقل معلومات إلى نسبة تباين لا تقل عن 3:1 مع خلفيتها.

أي طريقة تختار؟

هل أنت مستعد للبدء؟ ابحث في كل المجموعات أو تصفح مجموعات شائعة مثل Lucide وTabler Icons وMaterial Design Icons. وقبل النشر، راجع ترخيص المجموعة؛ إذ يشرح دليل تراخيص الأيقونات ما يشترطه كل ترخيص.