ForHosting KIT · قراءة المواقع ومراقبتها

ورقة رموز SVG

أدخل الأسماء home وsearch وuser لتحصل على ورقة رموز SVG مخفية واحدة فيها رمز لكل اسم، مع مقطع use لكل أيقونة تلصقه حيث تظهر. تُرفض القوائم الفارغة والأسماء المكررة وغير الصالحة. مجاني في متصفحك.

مجاني
يعمل في متصفحك
دون تسجيل
بياناتك لا تغادر جهازك

شغّل الأداة مجانًا اطّلع على الـAPI

استخدمها من الويبAPIالبريدTelegramالتطبيق قريبًا

مثال محلول

إذا أدخلت

Ids: home, search, user

تحصل على

الكمية: 3
خاصية viewBox: 0 0 24 24
بادئة المعرّف
معرّفات الرموز: home, search, user

تحافظ أوراق رموز SVG على أنظمة الأيقونات صغيرة وقابلة للتخزين المؤقت وميسّرة الوصول: وثيقة مخفية واحدة تحمل رموزًا قابلة لإعادة الاستخدام، ويشير كل زر أو عنصر تنقل إليها بعنصر use قصير. ما زال المصممون ومهندسو الواجهة الأمامية يضيعون الوقت في كتابة الغلاف يدويًا وإعادة تسمية المعرّفات ومزامنة مواضع الاستخدام عند دخول أيقونة جديدة إلى المجموعة. تقبل هذه القدرة قائمة غير فارغة من معرّفات الأيقونات، مع viewBox وبادئة id اختياريين، وتعيد ترميز الورقة بشكل حتمي مع مقتطف use لكل معرّف رمز نهائي.

ما ورقة رموز SVG ولماذا تهم قوائم المعرّفات

ورقة أيقونات SVG الكلاسيكية عنصر svg جذري واحد، غالبًا ما يُخفى بـ display none ويُعلَّم بـ aria-hidden حتى تتخطى تقنيات المساعدة كتلة التعريفات. داخلها كل أيقونة عنصر symbol يكون id الخاص به الاسم المستقر الذي يستخدمه منتجكم في كل مكان: home وsearch وcart وuser-settings. تعيش المسارات والهندسة كأبناء لتلك الرموز؛ وتُصدر هذه الأداة أغلفة symbol الفارغة مع viewBox مشترك حتى يحقن خط أصولكم أو تصدير المصمم الهندسة لاحقًا دون إعادة كتابة كل مستهلك.

في مواضع الاستدعاء تُشيرون إلى رمز بـ use وقطعة href تطابق معرّف الرمز، عادة داخل svg صغير للحجم وتنسيق currentColor. الإبقاء على مفردات المعرّفات قائمة واحدة—لا ترميزًا منسوخًا—يمنع الانحراف بين صادرات Figma ومكوّنات React وتذييلات البريد وصفحات التسويق الثابتة. عندما تكون القائمة فارغة لا يوجد ما يُنشر: يرفض هذا الطرف المصفوفات الفارغة بدل إرجاع ورقة بصفر رموز كانت ستمرّر بناءً مهملًا وتُشحن واجهة مكسورة.

عقد الإدخال وشكل الاستجابة وقواعد التحقق

يُهذَّب كل بند؛ وتُرفض الفراغات. يجب أن يطابق كل id رمز اسم SVG وXML عمليًا: حرف أو شرطة سفلية أولًا، ثم أحرف وأرقام وشرطة سفلية ونقطة ونقطتان أو واصلة. تحظر هذه القاعدة المسافات والأحرف التي تكسر السمات أو مراجع الشظايا.

تُهرَّب قيم السمات لـ amp وعلامات الاقتباس والأقواس الزاوية حتى تبقى الرموز الغريبة لكن القانونية آمنة داخل الترميز. فشل التحقق لا يُحاسب.

أين يحقق توليد الورقة وuse قيمة حقيقية

تولّد فرق نظام التصميم غلاف الورقة كلما تغيّر ملف رموز الأيقونات، ثم تفتح طلب دمج يضيف فقط أبناء path داخل الرموز القائمة. مواقع التسويق وقوالب CMS تلصق مقتطفات use في النص الغني أو مكتبات الاختصارات دون تعليم المؤلفين صياغة SVG كاملة. تتحقق مراجعات الإتاحة من أن كتلة التعريفات aria-hidden وأن استخدامات الزينة تحمل aria-hidden وfocusable false كما يُصدر هذا الطرف افتراضيًا—وما زال المؤلفون يضيفون aria-label أو title عندما تكون الأيقونة الاسم الظاهر الوحيد لعنصر تحكم.

احتفظوا بقوائم المعرّفات في التحكم بالإصدارات، وارفضوا النشر الفارغ، فتحصلون على مصدر حقيقة واحد لأوراق رموز SVG دون إقامة CDN أيقونات كامل لمجرد ترميز الغلاف.

حالات الاستخدام

مكتبة المكوّنات ووثائق Storybook

حافظوا على محاور Storybook وأمثلة README متوافقة مع معرّفات رمز حقيقية حتى لا يشير المطوّرون إلى شظية مفقودة.

اختصارات CMS وصفحات التسويق

امنحوا مؤلفي المحتوى ترميز use جاهزًا للصق لأيقونات التنقل والتذييل دون تحرير تعريفات SVG يدويًا.

الأسئلة الشائعة

ماذا يُرجع منشئ ورقة رموز SVG؟

تضيفون هندسة المسار داخل الرموز في خط أصولكم.

ماذا يحدث إذا كانت قائمة المعرّفات فارغة؟

الكتالوج الفارغ ليس نشر ورقة صالحًا؛ أصلحوا القائمة وأعيدوا المحاولة. فشل التحقق لا يُحاسب.

كيف أضيف بادئة مثل icon- إلى كل الرموز؟

اكتب البادئة مرة واحدة فتوضع أمام كل اسم، فيصبح home مثلًا icon-home. بهذا لا تتعارض أيقوناتك مع رمز يحمل الاسم نفسه من مكتبة أخرى في الصفحة ذاتها.

ما الأحرف المسموح بها في اسم الأيقونة؟

يبدأ الاسم بحرف أو شرطة سفلية، ثم يمكن أن يضم أحرفًا وأرقامًا وشرطات سفلية ونقاطًا ونقطتين رأسيتين وشرطات. تُرفض المسافات والرموز الأخرى لأنها تكسر الترميز أو الإشارة من use إلى الرمز.

ماذا يحدث إذا انتهت أيقونتان بالاسم نفسه؟

لا تُنشأ الورقة وتظهر رسالة واضحة، حتى لو ظهر التكرار بعد إضافة البادئة فقط. تصحيح القائمة أكثر أمانًا من ترك رمز يحل محل آخر بصمت في المتصفح.

أدوات ذات صلة

للمطوّرين — الوصول عبر API

كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.

الـEndpoint

POSThttps://api.kit.forhosting.com/web/svg-symbol-sprite-build

صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.

استدعِ الخدمة من بيئتك

curl -X POST https://api.kit.forhosting.com/web/svg-symbol-sprite-build \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"ids":["home","search","user"]}'

const res = await fetch("https://api.kit.forhosting.com/web/svg-symbol-sprite-build", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "ids": [
      "home",
      "search",
      "user"
    ]
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/svg-symbol-sprite-build",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "ids": [
        "home",
        "search",
        "user"
    ]
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/svg-symbol-sprite-build", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"ids":["home","search","user"]}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"ids":["home","search","user"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/svg-symbol-sprite-build", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

مثال على الطلب

{
  "ids": [
    "home",
    "search",
    "user"
  ]
}

مثال على الاستجابة

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.svg_symbol_sprite_build",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.

الأسعار

لكل طلب$0.002

السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.

الحدود

`timeout_sec`	30
`max_crawl_pages`	25

الأخطاء

HTTP	الرمز	المعنى
`401`	`unauthorized`	مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك.
`402`	`insufficient_balance`	رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة.
`404`	`unknown_type`	نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب.
`429`	`rate_limited`	تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة.

ملاحظات تقنية

تفشل القوائم الفارغة بـ invalid_input حتى لا تنشر خطوط الأنابيب ورقة جوفاء. المنطق النقي نفسه يشغّل ودجة المتصفح المجانية ومسار API، فلا تختلف صادرات رموز التصميم ووثائق Storybook وHTML الإنتاج في إملاء المعرّف أو شكل السمات.

ما ورقة رموز SVG ولماذا تهم قوائم المعرّفات

البادئة الاختيارية id_prefix (مثل icon-) تتيح لمستودعات متعددة المشاريع إعطاء فضاء أسماء للرموز حتى لا تصطدم ودجات الطرف الثالث بمعرّف home لديكم. view_box الاختياري افتراضيًا هو اللوحة الشائعة 0 0 24 24 لمجموعات بأسلوب Material، ويمكنكم تمرير أي viewBox بأربعة أرقام حتى تبقى لوحات 16 بكسل أو المخصصة متسقة عبر الورقة كلها.

عقد الإدخال وشكل الاستجابة وقواعد التحقق

أرسلوا جسم JSON عبر POST يتضمن ids، وهو مصفوفة سلاسل غير فارغة إلزامية (تُقبل الأسماء البديلة icon_ids وicons). معرّفات الرمز النهائية المكررة—بعد تطبيق id_prefix الاختياري—تفشل برسالة invalid_input واضحة حتى تصلحوا الكتالوج بدل الكتابة فوق الرموز في المتصفح. view_box اختياري وافتراضي 0 0 24 24؛ وعند توفيره يجب أن يكون أربعة أرقام مفصولة بمسافات بعرض وارتفاع موجبين. id_prefix اختياري وفارغ افتراضيًا؛ وعند تعيينه يجب أن يكون نفسه رمز اسم صالحًا ليبقى معرّف الرمز المسلسل قانونيًا. عند النجاح يتضمن الجسم count وview_box وid_prefix المطبّعين وsymbol_ids بترتيب الإدخال وsprite_markup كـ svg مخفي متعدد الأسطر يحتوي symbol فارغًا لكل id وuse_snippets ككائنات بحقول id وsnippet جاهزة للصق وuse_list_markup الذي يضم تلك المقتطفات بأسطر جديدة للعروض السريعة. الاستدعاءات الناجحة تستخدم رصيد KIT المدفوع مسبقًا بالسعر الأساسي المنشور $0.002 لأن العمل parse نقي بلا رموز نموذج ولا شبكة صادرة.

أين يحقق توليد الورقة وuse قيمة حقيقية

مكتبات المكوّنات تُرسل عناصر تحكم Storybook تسرد معرّفات الرمز من استجابة API نفسها حتى لا تخترع الوثائق id لا تعرّفه الورقة. منتجات متعددة العلامات تربط بادئات العلامة عبر id_prefix حتى يُصدر خط أنابيب واحد brand-a-home وbrand-b-home دون تشعيب المعالجات. يمكن لعمال الحافة والمولّدات الثابتة استدعاء شكل الوحدة نفسه على مسار المتصفح المجاني للمعاينات وعلى مسار API لإعادة البناء الجماعي بعد تفريغ تصميم.

حالات التكامل

صادرات رموز التصميم وكتالوج الأيقونات

حوّلوا قائمة JSON بأسماء الأيقونات إلى غلاف ورقة SVG مخفية ومقتطفات use مطابقة كلما تغيّر الكتالوج في CI.

أسئلة تقنية

هل يمكن إعطاء المعرّفات فضاء أسماء ببادئة؟

نعم. عيّنوا id_prefix (مثل icon-) فيصبح home هو icon-home. تُرفض المكررات بعد البادئة.

كيف أضبط viewBox لكل رمز؟

مرّروا view_box كأربعة أرقام مثل 0 0 24 24 (الافتراضي) أو 0 0 16 16. يجب أن يكون العرض والارتفاع موجبين.

كم تكلفة إنشاء ورقة رموز SVG؟

أداة المتصفح مجانية. طلبات API تستخدم رصيد KIT المدفوع مسبقًا بسعر $0.002 لكل استدعاء ناجح؛ الإدخال غير الصالح لا يُحاسب.

اطّلع على توثيق KIT الكامل ←

شغّل الأداة مجانًا

مثال محلول

ما ورقة رموز SVG ولماذا تهم قوائم المعرّفات

عقد الإدخال وشكل الاستجابة وقواعد التحقق

أين يحقق توليد الورقة وuse قيمة حقيقية

حالات الاستخدام

مكتبة المكوّنات ووثائق Storybook

اختصارات CMS وصفحات التسويق

الأسئلة الشائعة

أدوات ذات صلة

للمطوّرين — الوصول عبر API

الـEndpoint

استدعِ الخدمة من بيئتك

مثال على الطلب

مثال على الاستجابة

الأسعار

الحدود

الأخطاء

ملاحظات تقنية

ما ورقة رموز SVG ولماذا تهم قوائم المعرّفات

عقد الإدخال وشكل الاستجابة وقواعد التحقق

أين يحقق توليد الورقة وuse قيمة حقيقية

حالات التكامل

صادرات رموز التصميم وكتالوج الأيقونات

أسئلة تقنية

شكرًا