منشئ سبرايت SVG
أنشئ سبرايت واحدًا من مجموعات الأيقونات لتسريع تسليم الواجهة. مناسب لأنظمة التصميم وتطبيقات الويب ويعمل محليًا بالكامل.
اسحب ملف SVG وأفلته
أو انقر للاختيار أو الصق كود SVG
اسحب ملفات SVG وأفلتها
أو انقر لاختيار عدة ملفات
لماذا تستخدم منشئ سبرايت SVG؟
ادمج عدة ملفات SVG
يجمع هذا المُنشئ مجموعات الأيقونات الكاملة في سبرايت واحد، مما يقلل التعامل المتكرر مع الملفات ويسهّل تنظيم الأصول داخل ملف واحد.
تسمية تلقائية للمعرّفات
يولّد المعرّفات من أسماء الملفات ويعالج التكرار تلقائيًا، مما يجعل التسمية أوضح ويقلل التعارضات أثناء الاستخدام.
مخرجات سبرايت تعتمد على <symbol>
يصدر سبرايتًا متوافقًا مع `<symbol>` و`<use>` بحيث يمكن إعادة استخدام الأيقونات في HTML أو React أو Vue من دون تكرار غير ضروري.
يحافظ على viewBox
يحتفظ بقيم viewBox لكل رمز حتى تظل الأيقونات قابلة للتحجيم بشكل صحيح من دون قص أو تشوه.
تسليم عبر طلب واحد
يساعدك على شحن سبرايت واحد بدل عشرات الملفات، مما يقلل عدد الطلبات ويبسط التخزين المؤقت في المشاريع الكبيرة.
معالجة محلية وخاصة
يعمل بالكامل داخل المتصفح من دون رفع الملفات إلى أي خادم، لذلك تبقى مكتبات الأيقونات والأصول الحساسة على جهازك.
كيفية إنشاء سبرايت SVG
ارفع ملفات SVG
اسحب عدة ملفات وأفلِتها أو ألصق كود SVG. سيحلل المُنشئ كل أيقونة مع الحفاظ على viewBox الأصلي.
راجع معرّفات الرموز
يعرض المُنشئ المعرّفات المولدة تلقائيًا حتى تتأكد من التسمية قبل التصدير وتعدل أسماء الملفات إذا احتجت إلى اصطلاح أكثر صرامة.
انسخ السبرايت أو نزّله
صدّر السبرايت الناتج وأعد استخدامه عبر الصفحات أو المكونات. يمكنك تضمينه مباشرة أو إضافته إلى مسار البناء.
الأسئلة الشائعة حول منشئ سبرايت SVG
ما هو سبرايت SVG ولماذا يُستخدم؟
كيف يتم إنشاء معرّفات الرموز؟
هل يحتفظ السبرايت بقيم viewBox؟
هل يمكن استخدام السبرايت في React أو Vue؟
هل تُرفع الملفات إلى خادم؟
هل يجب تحسين الأيقونات قبل إنشاء السبرايت؟
كيف أحدّث السبرايت لاحقًا؟
هل الأداة مجانية ومن دون تنزيل؟
هل أحتاج إلى حساب لاستخدامها؟
أدوات SVG ذات صلة
استخدم منشئ سبرايت SVG مع هذه الأدوات لتنظيف الأيقونات وتوحيد ألوانها وإعادة استخدامها بكفاءة أكبر.
محسن SVG
حسّن الأيقونات قبل إنشاء السبرايت لتقليل الحجم وتسريع التسليم.
افتح الأداةمصلح viewBox
أصلح قيم viewBox الناقصة حتى يظل السبرايت النهائي قابلاً للتحجيم بشكل صحيح.
افتح الأداةمبدل لون SVG
طبّق currentColor أو رموز التصميم قبل بناء السبرايت.
افتح الأداةSVG إلى React
حوّل الأيقونات الفردية إلى مكونات عندما لا تحتاج إلى سبرايت.
افتح الأداة