badanibex
badanibex
رسومات SVG مخصصة للمشاريع العربية، كل رسمة قابلة للتخصيص الكامل بـ CSS Variable واحدة - جلد، ملابس، لون، خلفية - Web Component جاهز، TypeScript، RTL-first.
غيّر لون الجلد والملابس والخلفية لكل رسمة بـ CSS variable واحدة - لا تعديل في الـ SVG مطلوب.
استخدم <suwar-icon name="developer"> في أي إطار عمل - React وVue وAngular وHTML خام.
ملف sprite.svg واحد يضم 40 رسمة كـ symbol - تحميل واحد، استدعاء لا محدود، أداء ممتاز.
index.d.ts كامل مع types للـ ILLUSTRATIONS array وSuwarIcon class واستدعاء useSuwar function.
الشخصيات بملامح عربية وتفاصيل ثقافية أصيلة - نصوص عربية، حجاب، تفاصيل السوق العربي.
Empty States، People، Business، Tech، Success - كل فئة مصممة لحالات استخدام محددة.
كل رسمة تمر بـ SVGO optimization - حجم أصغر بـ 22% مع الحفاظ على الجودة والـ viewBox.
جميع الرسومات بـ viewBox ثابت - تكبّر وتصغر بنسب مثالية على الجوال والتابلت والسطح المكتب.
غيّر لون الجلد والملابس والتمييز مباشرة - كل ما تراه هنا هو ما يحصل عليه المشتري.
كل فئة مصممة لحالة استخدام محددة في المشاريع الرقمية
empty-cart، empty-search، empty-inbox، no-internet، error-404، error-server - لصفحات الحالات الفارغة والأخطاء.
developer، designer، manager، student، customer، team، remote-work - شخصيات بملامح عربية وثقافية أصيلة.
meeting، analytics، invoice، contract، startup، onboarding، payment، chat، calendar - لتطبيقات الأعمال والـ SaaS.
code-review، deployment، mobile-app، database، security، ai-robot - للمنصات التقنية والـ DevOps.
success-launch، achievement، celebration، growth، award، verified - للحالات الإيجابية والإنجازات.
notification، favorite، upload، download، coming-soon، maintenance - لحالات التفاعل اليومية.
ضع sprite.svg في مشروعك واستورد suwar.css لتفعيل CSS Variables الافتراضية.
HTML خام: <suwar-icon name="developer"> أو React: useSuwar("developer") - بسيط وسريع.
غيّر --suwar-skin لتون الجلد، --suwar-clothes للملابس، --suwar-accent للتمييز - CSS واحد.
الرسومات تتكيف مع الثيم الفاتح والداكن تلقائياً، RTL-first بلا إضافات.
SVGO 3
CSS Vars
Web Component
TypeScript
esbuild
Cairo Font
المكتبة مستقلة بالكامل - لا framework مطلوب، لا npm install للمستخدم النهائي. فقط أضف الـ sprite وabدأ.
Suwar هي مكتبة رسومات SVG مصممة خصيصاً للمشاريع الرقمية العربية، تضم 40 رسمة توضيحية تغطي أبرز الحالات في تطبيقات الويب والجوال. كل رسمة مبنية بـ CSS Variables للتخصيص الكامل دون لمس كود الـ SVG.
يمكن استخدام Suwar مع منتجات BadanIbex الأخرى مثل Sahan Design System أو HarakAt لحركات UI، كما يمكن تصفح كتالوج منتجات BadanIbex لاكتشاف أدوات أخرى للمشاريع العربية.
الرسومات الجاهزة من المكتبات الغربية تفتقر للملامح والتفاصيل الثقافية للمستخدم العربي. Suwar تحل هذه المشكلة بشخصيات بملامح شرق أوسطية، عناصر ثقافية أصيلة، ونصوص عربية داخل الرسومات نفسها.
بدلاً من تعديل كل رسمة يدوياً، يكفي تعريف CSS variables على مستوى الـ :root أو على عنصر محدد. --suwar-skin لتون الجلد، --suwar-hair للشعر، --suwar-clothes للملابس، --suwar-accent للتمييز، --suwar-bg للخلفية.
هذا يجعل Suwar مثالية لـ Design Systems المتعددة الثيمات - ثيم فاتح وداكن وبراند مخصص بـ CSS واحد لا أكثر.
يناسب Suwar مطوري الويب والجوال العاملين على مشاريع عربية، فرق الـ Product Design التي تبني Design Systems، وكالات التطوير التي تسلّم مشاريع SaaS للسوق العربي، والمستقلين الذين يريدون رفع جودة تطبيقاتهم بسرعة.
نعم. Web Component يعمل في أي إطار عمل. يوجد أيضاً useSuwar() function لـ React وESM import للـ Vue وAngular.
عرّف --suwar-skin في الـ CSS على المكون أو الصفحة. 5 تونات جاهزة في suwar.css يمكن استخدامها مباشرة.
نعم. المصادر الأصلية مضمّنة مع pipeline البناء - أضف SVG للمجلد وشغّل npm run build لإضافتها للـ sprite تلقائياً.
Suwar تمنحك 40 رسمة SVG جاهزة، CSS Variables للتخصيص الكامل، Web Component لأي إطار عمل، TypeScript - كل شيء في حزمة واحدة بـ $49.