منشئ مكوّن الصورة الرمزية.

أنشئ صوراً رمزية جاهزة للإنتاج من أمر واحد. 6 أنماط مفتوحة المصدر — صورة، رسم توضيحي بأسلوب Notion، بديل بالأحرف الأولى، شارة حضور، مجموعة متراكبة، أداة رفع — كلها Tailwind + shadcn، متاحة للجميع وقابلة لإعادة التنسيق وبترخيص MIT. انسخ الكود، أو أعد إنشاء أي منها مباشرة في مشروعك على MeDo أو Lovable أو Bolt أو v0 أو Cursor.

6 قالبًا

قوالب الصورة الرمزية التي يمكنك توليدها

كل قالب هو طلب حقيقي لا صورة. انسخه إلى أي محرّر ذكاء اصطناعي، أو شغّله في MeDo لتحصل على كود React و Tailwind مباشرة.

أساسيصورة + بديل

صورة مع بديل بالأحرف الأولى

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

أنشئ مكوّن <Avatar /> قابلاً لإعادة الاستخدام في React باستخدام Tailwind CSS. النمط: صورة رمزية أساسية مع صورة وبديل بالأحرف الأولى. التصميم: صورة رمزية دائرية تعرض عنصر <img> عند تحميل src؛ وعند حدوث خطأ أو غياب src، اعرض بديلاً مُولَّداً بالأحرف الأولى مع لون خلفية حتمي مستخرج من نص الاسم. الواجهة: خصائص src وname (مطلوب، يُستخدم لنص alt وللأحرف الأولى) وsize ("xs" | "sm" | "md" | "lg" | "xl") وتمرير className. أدرج: نص alt مطلوب مستخرج من name، وloading="lazy"، وتبديل البديل عبر onError باستخدام حالة محلية، وحلقة focus-visible عند العرض داخل رابط أو زر، ودعم الوضعين الفاتح والداكن عبر أصناف Tailwind dark:. القيود: React + Tailwind فقط، دون أي اعتماديات واجهة أو صور خارجية، ودون انزياح التصميم أثناء تحميل الصورة (احجز الصندوق بعرض وارتفاع ثابتين).

جرّبه في MeDo

الحالةشارة الحضور

صورة رمزية مع نقطة حضور

online وaway وbusy وoffline — نقطة حضور مثبّتة على حافة الصورة الرمزية.

أنشئ مكوّن <AvatarWithStatus /> في React باستخدام Tailwind CSS. النمط: صورة رمزية مع شارة حضور. التصميم: صورة رمزية دائرية مع نقطة حالة صغيرة مثبّتة في الزاوية السفلية اليمنى، مفصولة عن الصورة بحلقة بلون الخلفية لتظهر بوضوح على أي سطح. الواجهة: خصائص src وname وsize وstatus ("online" | "away" | "busy" | "offline")، مع تعيين لون النقطة لكل حالة وتغيّر حجم النقطة تبعاً لمقاس الصورة الرمزية. أدرج: بديلاً بالأحرف الأولى، وتسمية نصية مخفية بصرياً تُعلن الحالة لقارئات الشاشة (لا تعتمد على اللون وحده)، وaria-label على العنصر الحاوي، ودعم الوضعين الفاتح والداكن. القيود: React + Tailwind فقط، دون اعتماديات واجهة خارجية، ولا تتجاوز النقطة 30% من حافة الصورة الرمزية.

جرّبه في MeDo

مجموعةتراكب + فائض

مجموعة صور رمزية مع رقاقة +N

مجموعة صور رمزية متراكبة مع رقاقة فائض +N. للفرق والمنفذين والمتعاونين.

أنشئ مكوّن <AvatarGroup /> في React باستخدام Tailwind CSS. النمط: مجموعة صور رمزية متراكبة (متداخلة) مع عدّاد فائض. التصميم: صف أفقي من صور رمزية متداخلة بمقدار الثلث تقريباً، لكل منها حلقة بلون الخلفية لتبقى المجموعة المتراكبة واضحة؛ وبعد الحد الأقصى للصور الظاهرة، اعرض رقاقة عدّاد «+N» بالمقاس والشكل نفسيهما. الواجهة: خصائص users (مصفوفة من { src, name }) وmax (القيمة الافتراضية 4) وsize، وonAddClick اختياري يعرض عنصر «دعوة» بحدود متقطعة في نهاية الصف. السلوك: التحويم يرفع الصورة الرمزية المحوَّم عليها فوق جاراتها بإزاحة صغيرة وتغيير في z-index؛ وتعكس المجموعة اتجاه التداخل عبر خاصية "dir". أدرج: بديلاً بالأحرف الأولى لكل صورة رمزية، وaria-label يوجز العدد الكامل للأعضاء، وعناصر قابلة للتركيز بلوحة المفاتيح مع حلقات focus-visible، ودعم الوضعين الفاتح والداكن. القيود: React + Tailwind فقط، دون اعتماديات واجهة خارجية، ودون مكتبة حركة.

جرّبه في MeDo

مقاسات وأشكالمقاسات + أشكال

منظومة المقاسات

من xs إلى xl على منظومة مقاسات واحدة، مع أشكال circle وsquircle والمربع المستدير.

أنشئ مكوّن <Avatar /> قابلاً لإعادة التنسيق في React مع منظومة كاملة للمقاسات والأشكال، باستخدام Tailwind CSS. النمط: عنصر أساسي في نظام تصميم الصور الرمزية. الواجهة: size ("xs" | "sm" | "md" | "lg" | "xl" | "2xl") مُعيَّن عبر كائن بحث واحد يتحكم في العرض والارتفاع وحجم الخط ونصف قطر الحدود معاً؛ وshape ("circle" | "squircle" | "square")؛ إضافة إلى src وname وclassName. المطلوب: أن يتغيّر حجم خط الأحرف الأولى تناسبياً مع صندوق الصورة الرمزية بحيث يبقى xs و2xl متوازنين؛ وأن تقيم كل الرموز في كائن إعداد واحد أعلى الملف ليتمكن الفريق من إعادة التنسيق في مكان واحد. أدرج: بديلاً بالأحرف الأولى، ونص alt مستخرجاً من name، وforwardRef إلى العنصر الجذر، وتصدير أنواع الخصائص بـ TypeScript، ودعم الوضعين الفاتح والداكن. القيود: React + Tailwind فقط، دون اعتماديات واجهة خارجية، ودون أنماط مضمّنة باستثناء المقاسات المحسوبة بالبكسل.

جرّبه في MeDo

أداة رفعقابلة للتحرير

صورة رمزية مع رفع وإزالة

صورة رمزية مع شارة كاميرا وزر رفع وقيود على الملف. لصفحات الإعدادات.

أنشئ مكوّن <AvatarUploader /> في React باستخدام Tailwind CSS. النمط: عنصر تحكم قابل للتحرير في صورة الملف الشخصي لصفحة إعدادات. التصميم: صورة رمزية كبيرة على اليسار مع شارة كاميرا دائرية مثبّتة في زاويتها السفلية اليمنى؛ وعلى اليمين، تسمية «صورة الملف الشخصي»، وسطر تلميح بقيود الملف («PNG أو JPG، حتى 2 MB»)، وزر رفع أساسي مع زر نصي للإزالة. السلوك: عنصر <input type="file" accept="image/png,image/jpeg"> مخفي تُشغّله الشارة وزر الرفع كلاهما؛ والتحقق من الحجم والنوع في جهة العميل مع رسالة خطأ مضمّنة؛ ومعاينة محلية عبر URL.createObjectURL يتم إلغاؤها عند إزالة المكوّن؛ والإزالة تستعيد البديل بالأحرف الأولى. أدرج: ربط <label> بحقل الملف، ومنطقة aria-live لرسائل التحقق، وحلقات focus-visible، وحالة معطّلة/جارٍ الرفع على الزر، ودعم الوضعين الفاتح والداكن. القيود: React + Tailwind فقط، دون مكتبة رفع، ودون اعتمادية اقتصاص — اعرض دالة رد نداء onChange(file) للمستدعي.

جرّبه في MeDo

صف الملفصورة رمزية + بيانات

صف الصورة الرمزية والاسم والدور

صورة رمزية واسم وعلامة توثيق ودور — الصف الذي يملأ الجداول وقوائم الأعضاء.

أنشئ مكوّن <AvatarRow /> في React (وغلافاً <MemberList />) باستخدام Tailwind CSS. النمط: صف يجمع صورة رمزية مع بيانات وصفية لقوائم الأعضاء والجداول وسلاسل التعليقات. التصميم: صورة رمزية على اليسار، وكتلة من سطرين تضم اسم الشخص (مع علامة توثيق اختيارية) وسطراً ثانوياً باهتاً («الفريق · الدور»)، وزر إجراء تابع على اليمين؛ والكتلة الوسطى تُقتطع باستخدام min-w-0 + truncate بدلاً من الالتفاف. الواجهة: خصائص users (مصفوفة من { src, name, role, team, verified })، وتسمية للإجراء التابع، ودالة رد نداء onAction(user). أدرج: بديلاً بالأحرف الأولى، ووسوم <ul>/<li> دلالية في الغلاف، واسماً متاحاً للزر التابع («إدارة صلاحية {name}»)، وإبراز الصف عند التحويم، وحلقات focus-visible، ودعم الوضعين الفاتح والداكن. القيود: React + Tailwind فقط، دون مكتبة جداول أو قوائم، ويعمل بعرض 320px دون فائض.

جرّبه في MeDo

أنماط الصورة الرمزية لمواقع مختلفة

المكوّن الصورة الرمزية نفسه، مُهيّأ لنوع الموقع الذي يُنشر عليه.

01 / 06

إعدادات فرق SaaS

قوائم الأعضاء تقوم وتسقط بصف الصورة الرمزية — صورة، اسم، دور، إجراء صلاحية. والبديل بالأحرف الأولى يحافظ على ترتيب الجدول عندما لا يكون أحد قد رفع صورة بعد.

أنماط الصورة الرمزية وتنويعاته

اختر التنويعة التي تناسب بقية الصفحة، ثم ولّدها.

01 / 06

صورة رمزية أساسية

صورة مع بديل بالأحرف الأولى ولون خلفية حتمي لكل اسم. الأساس الذي تبني عليه كل الأنواع الأخرى.

الصورة الرمزية في React و Next.js و Vue و Svelte

React و Next.js و Vue 3 و SvelteKit و Astro أو HTML صِرف — المكوّن الصورة الرمزية نفسه بست طرق للإضافة.

01 / 06

صورة رمزية React

مكوّن وظيفي واحد مع جدول بحث للمقاسات وبديل عبر onError. لا حالة في جهة العميل سوى راية فشل الصورة، وآمن في أي موضع داخل شجرة React 18+.

src/components/Avatar.tsx

export function Avatar({ src, name, size = "md" }) {
  const [failed, setFailed] = useState(false);
  return failed || !src
    ? <span className={box[size]}>{initials(name)}</span>
    : <img src={src} alt={name} onError={() => setFailed(true)} />;
}

من يستخدم مكوّن الصورة الرمزية

قوائم الفرق والأعضاء

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

التعاون الفوري

الصور الرمزية المتراكبة مع رقاقة +N هي أرخص واجهة حضور ممكنة — صف واحد يخبر المستخدم بمن يحرّر أيضاً دون شريط جانبي أو لوحة websocket.

المنشورات والتعليقات الاجتماعية

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

الدردشة وصناديق الدعم

شارات الحضور تخبر موظف الدعم بما إذا كان العميل لا يزال متصلاً، والبديل بالأحرف الأولى يحافظ على قابلية قراءة صندوق الوارد عندما لا يملك أحد صورة ملف شخصي.

إعدادات الحساب والتهيئة الأولى

أداة رفع الصورة الرمزية تتولى التحقق من نوع الملف وحجمه، والمعاينة المحلية، والإزالة — مسار صورة الملف الشخصي كاملاً دون مكتبة رفع.

المنصات التجارية والمراجعات

صور المراجعين الرمزية مع علامة توثيق تفعل للثقة المتصوَّرة أكثر مما تفعله نجمة إضافية. أضِف صف الملف الشخصي مباشرة إلى صفحات المنتجات.

كيف تضيف الصورة الرمزية إلى مشروعك

أربع خطوات، من اختيار قالب الصورة الرمزية إلى إطلاقه في الإنتاج.

01~30 ثانية

اختر نمط صورة رمزية

استعرض القوالب الستة أعلاه واختر الأقرب إلى واجهتك — صورة، رسم توضيحي، صف جدول، مجموعة حضور، أو عنصر تحكم للرفع.

02~2 ثانية

عايِنه مباشرة

كل بطاقة تعرض معاينة حقيقية بـ React + Tailwind، فترى التباعد والمقاسات قبل أن تنسخ أي شيء.

03~10 ثوانٍ

انسخ الأمر أو الكود

انسخ الأمر إلى MeDo أو Lovable أو Bolt أو v0 أو Cursor، أو خُذ كود المكوّن مباشرة من البطاقة.

04~1 دقيقة

أضِفه إلى تطبيقك

استورد <Avatar /> مرة واحدة، ثم أعد استخدامه في الجداول والرؤوس وسلاسل التعليقات مع خاصيتي المقاس والشكل.

أسئلة شائعة حول الصورة الرمزية

ما هو مكوّن الصورة الرمزية؟

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

كيف يعمل البديل بالأحرف الأولى في الصورة الرمزية؟

يأخذ المكوّن اسم المستخدم، ويقسمه عند المسافات، ثم يعرض الحرف الأول من الجزء الأول والجزء الأخير بأحرف كبيرة. ويُستخرج لون الخلفية بشكل حتمي من نص الاسم، فيحصل الشخص نفسه دائماً على اللون نفسه عبر الجلسات والأجهزة.

ما هي مجموعة الصور الرمزية أو الصورة الرمزية المتراكبة؟

مجموعة الصور الرمزية هي صف أفقي من صور رمزية متداخلة، لكل منها حلقة بلون الخلفية لتبقى المجموعة المتراكبة قابلة للقراءة. وبعد تجاوز عدد أقصى من الصور الظاهرة تُعرض رقاقة «+N». إنه النمط القياسي لأعضاء الفريق ومنفذي المهام والمتعاونين المتصلين.

هل مكوّنات الصورة الرمزية هذه متاحة للجميع؟

نعم. كل صورة رمزية تحمل نص alt مستخرجاً من اسم المستخدم، ويُعلَن عن حالة الحضور بتسمية مخفية بصرياً لا باللون وحده، وتُربط التلميحات عبر aria-describedby، وتحتفظ الصور الرمزية التفاعلية بحلقات focus-visible مرئية.

هل مكوّنات الصورة الرمزية هذه مجانية للاستخدام التجاري؟

نعم. كل قالب في المعرض مرخّص بترخيص MIT — استخدمه في المشاريع الشخصية وأعمال العملاء والمنتجات التجارية دون إسناد ودون رسوم ترخيص.

هل تعمل مع React وVue وSvelte؟

المكوّنات مكتوبة بـ React + Tailwind، لكن الوسوم لا تعتمد على إطار معيّن. ويعرض قسم أطر العمل أعلاه الصورة الرمزية نفسها في Next.js وVue 3 وSvelteKit وAstro وHTML الخالص.

كيف أضبط مقاسات صور الصورة الرمزية وأحسّنها؟

قدّم اقتصاصات مربعة بنحو ضعف حجم الصندوق المعروض (80px لصورة رمزية بمقاس 40px) لتبقى حادة على شاشات retina، وحدّد width وheight بشكل صريح لتجنّب انزياح التصميم، واستخدم object-cover، وأضف loading="lazy" للصور الرمزية الواقعة أسفل حدود الشاشة الأولى.

هل أستخدم صوراً رمزية فوتوغرافية أم رسوماً توضيحية؟

استخدم الصور الفوتوغرافية الحقيقية عندما تكون الهوية مهمة — أدلة الفرق، وصناديق الدعم، ومراجعات المنصات التجارية — لأن الوجه أسرع طريقة للتعرّف على شخص. واستخدم الرسوم التوضيحية بأسلوب Notion عندما لا يرفع معظم المستخدمين صورة أبداً، أو عندما تريد مظهراً متسقاً مع هوية علامتك، أو عندما يثير إظهار وجوه حقيقية مخاوف تتعلق بالخصوصية. والنظام الجيد يدعم الاثنين: صورة عند توفرها، ورسم توضيحي حتمي أو أحرف أولى عند غيابها.

أنشئ مكوّن الصورة الرمزية في 30 ثانية.

أعد إنشاء أي من قوالب الصور الرمزية الستة من أمر واحد، أو صِف قالبك الخاص — صورة، رسم توضيحي، شارات حضور، مجموعات متراكبة، أدوات رفع. مجاني بترخيص MIT ودون تسجيل.

افتح المنشئ عرض الأسعار