أيقونات Lucide في Discourse

:information_source: ملخص استبدال أيقونات Font Awesome الصلبة الافتراضية بمجموعة أيقونات خطوط مفتوحة المصدر هذه
:eyeglasses: معاينة مُستخدمة هنا على Meta في سمة Meta Branded
:hammer_and_wrench: المستودع github.com/discourse/discourse-lucide-icons
:question: دليل التثبيت كيفية تثبيت سمة أو مكون سمة
:open_book: جديد في سِمات Discourse؟ دليل المبتدئين لاستخدام سِمات Discourse

تثبيت مكون السمة هذا

أضف نظام أيقونات جديدًا إلى منتدى Discourse الخاص بك عن طريق استبدال أيقونات Font Awesome الافتراضية بـ Lucide — مجموعة حديثة ومفتوحة المصدر من أيقونات الخطوط المتسقة والخفيفة الوزن.


لماذا Lucide؟

يأتي Discourse مزودًا بمكتبة Font Awesome، وهي مكتبة أيقونات عامة متعددة الأغراض. ومع ذلك، فإن النسخة المجانية من Font Awesome تحتوي على مجموعة محدودة من أيقونات الخطوط، ولا تكفي لبناء نظام أيقونات خطوط متناسق. يأتي Lucide ليملأ هذه الفجوة: فهو نسخة مشتقة من مجتمع أيقونات Feather Icons، مع مكتبة متنامية من أيقونات SVG نظيفة تعمل بشكل رائع في جميع الأحجام.

يُستخدم هذا المكون هنا على meta.discourse.org كجزء من سمة Meta Branded.


الإعدادات


معاينة لمكتبة الأيقونات الكاملة

يضيف المكون مجموعة محدودة تهدف إلى ربط جميع أيقونات Font Awesome الافتراضية.

يوفر Lucide المزيد من الأيقونات. لإدراج أيقونات إضافية في سمتك، راجع استبدال أيقونات SVG الافتراضية في Discourse بأيقونات مخصصة في سمة.


ملاحظات & قيود معروفة

  • ليست كل أيقونات Font Awesome لها مكافئ مباشر في Lucide. في بعض الحالات، يحتفظ المكون عمدًا بإصدار Font Awesome (على سبيل المثال، المتغيرات المملوءة لأيقونات المربع والدائرة).
  • يتم تحسين ربط الأيقونات بنشاط. نرحب بملاحظاتك حول أيقونات محددة!
19 إعجابًا

أنا سعيد جدًا لرؤية هذا!

لقد صادفتها بالصدفة عندما قمت بإنشاء Quote Callout TC، والخط الخفيف (والتنوع) يُحدث فرقًا حقيقيًا. أستخدمها الآن في معظم الأوقات عندما أتمكن من ذلك!

إعجابَين (2)

يا لها من لطف، أنا أجرب الآن :smiley:

إعجاب واحد (1)

أيقونة الزر للقفز إلى المنشور الذي ترد عليه تشبه زر ‘مشاركة’، وهو ما لا يبدو صحيحًا.

لقد نشرت أيضًا جزءًا آخر من ملاحظاتي هنا: Rebuilding the Meta Branded theme: New icons, a custom homepage, and a first look at the Blocks API - #12 by NateDhaliwal.

3 إعجابات