رد فعل شارات ملفك الشخصي والمشاريع.
ابحث عن قائمة كاملة بأكثر من 1400 شارة في الشارات
pnpm add react-simple-badgesnpm i react-simple-badgesyarn add react-simple-badgesbun add react-simple-badgesالمكون الذي يجعل صورة شارة من Shields.io باستخدام قائمة الرموز البسيطة. كل 24 ساعة يتم تشغيل إجراء github للتحقق من رموز جديدة. إذا كان إصدارها جديدًا ، فسيتم إصدار إصدار جديد من وحدة NPM. تهدف هذه الوحدة إلى استخدام مكون خادم React. باستخدام مكون Async الجديد. هذا يعني أنه يمكن استيراد قائمة الرموز الكبيرة للحصول على لون الخلفية الذي تحتاجه ولكن دون زيادة وقت تحميل صفحة المستخدمين النهائيين. ولكن هذا يعني أنك بحاجة إلى إطار يدعم مكونات الخادم وتفاعل 18.2.0 أو أحدث.
import { Badge } from "react-simple-badges"
export default async function HomePage ( ) {
return (
< >
< Badge name = "Node.js" style = { { width : 200 } } logoColor = "#eb4034" />
< Badge name = "YouTube Gaming" label = "Youtube" />
< Badge name = "Valve" label = "Value Please fix" style = { { padding : 10 } } />
< Badge name = "Tesla" backgroundColor = "#32a853" />
</ >
)
}مثال مشروع على stackblitz.com
<Badge /><Badge name="" /> مطلوب: سلسلةاسم الشارة التي تحاول استخدامها على سبيل المثال. "Instagram"
<Badge label="" /> اختياري: سلسلةسلسلة مخصصة لاستبدال الكلمة على الشارة على سبيل المثال. "Insta"
<Badge logoColor="" /> اختياري: السلسلة: لون سداسي عشرييحل محل لون الشعار الافتراضي إلى الأبيض على سبيل المثال. "#ffb900"
<Badge backgroundColor="" /> اختياري: السلسلة: لون سداسي عشرييحل محل لون خلفية الشارة على سبيل المثال. "#00e1ff"