أيقونات Twemoji

:information_source: ملخص استخدم رموز تويتر التعبيرية كأيقونات في ديسكورس.
:hammer_and_wrench: المستودع GitHub - nolosb/discourse-twemoji-icons: Use twemojis as icons in Discourse.
:question: دليل التثبيت كيفية تثبيت سمة أو مكون سمة
:open_book: جديد في سمات ديسكورس؟ دليل المبتدئين لاستخدام سمات ديسكورس

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

يضيف المكون رموز تويتر التعبيرية كأيقونات. يمكنك استخدام الرموز التعبيرية لإضافة أيقونات الفئات والعلامات باستخدام المكونات المعنية. يمكنك أيضًا استبدال أيقونات الواجهة الافتراضية، سواء في نوافذ المسؤول أو في كود السمة المخصص.

إليك عرض لـ سمة الكشك باستخدام هذا المكون لعرض الرموز التعبيرية على الواجهة وأيقونات الفئات:

:construction: تعليمات مفصلة

  • يتم إنشاء أسماء الأيقونات من بادئة tw واسم الرمز التعبيري المختصر بأسلوب kebab-case (يتم فصل جميع الكلمات بشرطة).

  • على سبيل المثال، الرمز التعبيري :sunny: يُعرف باسم الأيقونة tw-sun؛ :beach_umbrella: يُعرف باسم tw-beach-umbrella

  • ابحث عن الأسماء المختصرة في ورقة الغش لـ Twemoji

  • استخدم الأيقونات في نوافذ المسؤول، على سبيل المثال لتخصيص الشريط الجانبي:

  • استخدم الأيقونات في إعدادات المكون، على سبيل المثال لأيقونات الفئات:

    image

  • استخدم الأيقونات في كود السمة:

    api.replaceIcon('star', 'tw-star');

8 إعجابات

أرى أنك تقوم بشحن ملف SVG كبير للرموز التعبيرية، ولكن بما أن Discourse تقوم بالفعل بشحن جميع رموز تعبيرية تويتر، فلماذا لا تعيد استخدامها؟ سيؤدي ذلك إلى توفير مساحة للمستخدمين من تثبيت وتقديم ملف SVG هذا.

4 إعجابات

نعم، أود الحصول على وظائف هذه المكونة دون الحاجة إلى تقديم ملف سبرايت كبير. ولكن هل تقوم Discourse بتوفير twemojis كسلاسل يونيكود، أليس كذلك؟ أريد أن أكون قادرًا على استبدال أيقونات SVG وبقدر ما أفهم، أحتاج إلى ملفات SVG لتحقيق ذلك.

3 إعجابات

نحن نشحن كملفات PNG فردية، مثل https://emoji.discourse-cdn.com/twitter/beach_umbrella.png.

لذلك ستعمل في الشريط الجانبي بشكل جيد، ولكن نعم لن تعمل مع الأيقونات.

3 إعجابات

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

5 إعجابات