أيقونات العلامات

[TheBestPessimist]

وسوم الرصاصة + لون الوسم

إذا كنت تستخدم وسومًا على شكل رصاصة وتريد:

• أن يكون لون أيقونة الوسم ولون نص الوسم متطابقين
• إظهار الرصاصة فقط إذا لم تكن هناك أيقونة وسم مُعينة

إليك كيف قمت بذلك للوسوم books و science-fiction:

النتيجة النهائية:

1. إعداد مكون Tag icons (هذا المكون)

2. إعداد مكون ثانوي يجب أن يُحافظ على تزامنه مع Tag Icons
   في هذا المكون، نقوم بشيءَين:
   1. إخفاء الرصاصة لوسوم محددة
   2. تلوين نص الوسم بنفس لون الأيقونة

لجعل هذا يعمل، ننشئ مكون سمة جديد: Tag Icons extra.
في قسم Common/CSS:

1. أضف الميكسين التالي (يُستخدم مرة واحدة فقط):

@mixin updateBulletTag ($col) {
    &.bullet {
        color: $col !important;
    }
    &.bullet::before {
        content: none !important;
    }
}

2. لكل وسم تريد تعديله، الصق الكود التالي واستبدل REPLACEMETAG باسم الوسم و REPLACEMECOLOR بنفس لون الأيقونة:

[data-tag-name="REPLACEMETAG"] {
    @include updateBulletTag(REPLACEMECOLOR);
}