واجهة برمجية مجانية لأيقونات SVG: اربط الأيقونات وابحث عنها عبر الروابط

لكل أيقونة في Iconyz رابط عام ثابت، فيمكنك استخدامها في HTML أو CSS أو Markdown أو أي أداة تصميم دون تنزيل شيء. وتتيح لك واجهة JSON برمجية صغيرة أيضًا عرض مجموعات الأيقونات والبحث في أيقوناتها من شيفرتك الخاصة، دون الحاجة إلى مفتاح API.

الحصول على أيقونة بصيغة SVG

GET https://iconyz.com/api/public/svg/{prefix}/{name}.svg

{prefix} هو معرّف مجموعة الأيقونات و{name} هو اسم الأيقونة، ويظهر كلاهما في صفحة كل أيقونة، مثل lucide:house أو mdi:github. والاستجابة هي ملف SVG نفسه مع Content-Type: image/svg+xml.

<img src="https://iconyz.com/api/public/svg/mdi/github.svg" width="32" height="32" alt="GitHub">

![الإعدادات](https://iconyz.com/api/public/svg/tabler/settings.svg)

تغيير اللون

تُرسم الأيقونات أحادية اللون بالأسود أو بـ currentColor، ولا تستطيع الصور أن ترث هذا اللون. أضف المعامل color لتغيير لونها:

https://iconyz.com/api/public/svg/lucide/heart.svg?color=%23e11d48

القيمة لون سداسي عشري (#rgb أو #rrggbb أو #rrggbbaa) مع ترميز الرمز # في الرابط على شكل %23، أو إحدى القيم white أو black أو currentColor. أما الأيقونات متعددة الألوان، كالإيموجي والأعلام والشعارات، فتحتفظ بألوانها وتتجاهل هذا المعامل.

عرض مجموعات الأيقونات

GET https://iconyz.com/api/public/sets?limit=20&sort=icons

{
  "items": [
    {
      "prefix": "fluent",
      "name": "Fluent UI System Icons",
      "total": 19850,
      "category": "UI 24px",
      "license": "MIT",
      "palette": false,
      "sampleIcons": ["…"]
    }
  ],
  "total": 238, "limit": 20, "skip": 0
}

للحصول على تفاصيل مجموعة واحدة، بما فيها المؤلف ومعلومات الترخيص الكاملة:

GET https://iconyz.com/api/public/sets/{prefix}

عرض أيقونات مجموعة والبحث فيها

GET https://iconyz.com/api/public/sets/lucide/icons?q=arrow&page=1&limit=100

يصفّي q النتائج حسب اسم الأيقونة، ويبدأ page من 1، ويصل limit حتى 200. ويتضمن كل عنصر رابط svgUrl جاهزًا للاستخدام:

{
  "items": [
    { "id": "lucide:arrow-left", "prefix": "lucide", "name": "arrow-left",
      "svgUrl": "/api/public/svg/lucide/arrow-left.svg", "width": 24, "height": 24 }
  ],
  "total": 94, "page": 1, "limit": 100, "hasMore": false
}

مثال: أداة صغيرة لاختيار الأيقونات

ترسل الواجهة البرمجية ترويسات CORS، لذا يمكنك استدعاؤها مباشرة من المتصفح:

<input id="q" placeholder="ابحث في أيقونات Lucide…">
<div id="results"></div>
<script>
  const base = "https://iconyz.com";
  const results = document.getElementById("results");
  document.getElementById("q").addEventListener("input", async (e) => {
    const q = encodeURIComponent(e.target.value.trim());
    const res = await fetch(`${base}/api/public/sets/lucide/icons?q=${q}&limit=48`);
    const { items } = await res.json();
    results.innerHTML = items
      .map((i) => `<img src="${base}${i.svgUrl}" width="24" height="24" alt="${i.name}" title="${i.name}">`)
      .join("");
  });
</script>

التخزين المؤقت والاستخدام العادل

• تُخزَّن استجابات SVG مؤقتًا في المتصفح ليوم واحد وفي شبكة توصيل المحتوى (CDN) لأسبوع، لذا تكون الطلبات المتكررة سريعة.
• في التطبيقات المنشورة، ضمّن الأيقونات التي تستخدمها في تطبيقك (انسخ شيفرة SVG أو المكوّن من لوحة الأيقونة) بدلًا من الربط المباشر بمئات الروابط. بذلك لا يعتمد تطبيقك على أي خدمة خارجية أثناء التشغيل، وتُحمَّل الصفحات أسرع.
• تحتفظ الأيقونات بتراخيصها الأصلية عند تقديمها عبر الواجهة البرمجية. راجع ترخيص كل مجموعة، وانسب العمل إلى مؤلفه عند الحاجة. اطلع على شرح تراخيص الأيقونات.

تبحث عن أيقونة للتجربة؟ ابحث في كل المجموعات، أو ابدأ بـ Tabler Icons أو Material Design Icons.