# مكون موضوع ذكر الإيموجي

**URL:** <https://meta.discourse.org/t/emoji-mention-theme-component/90125>\
**Category:** Theme component\
**Created:** [18 يونيو 2018، 2:48م UTC](https://meta.discourse.org/t/emoji-mention-theme-component/90125 "2018-06-18T14:48:29Z")\
**Posts on this page:** 1\
**Showing post:** 7

<div class="post-metadata">

**Author:** ![jimkleiber](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jimkleiber/32/121814_2.png) [@jimkleiber](https://meta.discourse.org/u/jimkleiber)\
**Post date:** [6 يناير 2022، 7:06م UTC](https://meta.discourse.org/t/emoji-mention-theme-component/90125/7 "2022-01-06T19:06:58Z")

</div>

أردت أيضًا القدرة على استخدام ملفات SVG مخصصة كأيقونة بجوار الإشارة، وهو أمر رأيته في Guilded للموظفين وأردت أن يكون لدي هناك ولكني لم أستطع الحصول عليه - سبب آخر يجعلني أحب Discourse كثيرًا هو أنني أستطيع بالفعل اختراق شيء قد يعمل بدلاً من الأمل والانتظار حتى يضيفه المطورون.

لذلك قمت بإنشاء الحل التالي. إنه ليس مضمونًا بأي حال من الأحوال، ربما يتطلب ملف SVG الذي تقوم بتحميله أن يكون له متغير SCSS يبدأ بـ `svg` ومع ذلك يبدو أنه يعمل بما يكفي بالنسبة لي الآن 🙂

إذا أراد شخص ما أخذ هذا الكود وتطويره، ودمجه لجعله أكثر روعة، فسأكون ممتنًا!

الأشياء المحتملة للتحسين

1. جعله يعمل لجميع أيقونات SVG، مما يعني جميع أيقونات Discourse وجميع الأيقونات التي تم تحميلها لا تبدأ بـ `svg`.
2. تنظيف الكود.
3. تحسين التصميم، حيث قمت بتجميع CSS بطريقة ما ليعمل وقد لا يعمل في جميع الحالات.

بغض النظر، إليك مثال على إشارة مع استخدامي للأيقونة المخصصة التي لدي للدفاع العاطفي كأيقونة إشارة للموظفين:

![image](https://global.discourse-cdn.com/meta/original/3X/a/1/a10197bc809c31d8ec9079fc6d62a5502edf0da3.png)

إليك الكود الذي أضفته:

**`header.html`**

```plaintext
  // إضافة أيقونات SVG كخيار، طالما أنها مدرجة في الأصول وتم تحميلها
  // ينشئ كائنًا لجميع الأصول ويتكرر للعثور على الروابط التي تحتوي على سمة data-emoji
  // تساوي اسم متغير الأصل ثم يضيف عنوان URL لها

  // تحويل الكائن إلى مصفوفة مفاتيح
  const keys = Object.keys(settings.theme_uploads);

  // طباعة جميع المفاتيح
  console.log(keys);

  // التكرار فوق الكائن
  keys.forEach((key, index) => {
      console.log(`${key}: ${settings.theme_uploads[key]}`);
      api.decorateCooked($elem => {
        var url = settings.theme_uploads[key];
        console.log("key: " + key);
        console.log("index: " + index);
        console.log("url: " + url);
        console.log(JSON.stringify(settings.theme_uploads));
        $elem
          .find("a[data-emoji^='" + key + "']")
          .css("--svg-icon", "url('" + url + "')");
        }
      );    
  });

```

**`common.scss`**

```plaintext
@if $show-after-mention == "true" {
  [data-emoji^="svg"]:after {
    content: 'hey ';
    color: transparent;
    height:5px;
    width:15px;
    background: var(--svg-icon) no-repeat center;
    background-size: contain;
    display: inline;
  }
} @else {
  [data-emoji^="svg"]:before {
    content: 'hey ';
    color: transparent;
    height:5px;
    width:15px;
    background: var(--svg-icon) no-repeat center;
    background-size: contain;
    display: inline;
  }
}

```

هذا يتطلب منك أيضًا:

1. إنشاء مجلد `/assets`
2. إضافة ملفات `svg` في مجلد `/assets`، مثل `/assets/esd-heart.svg`
3. تحديث ملف `about.json` للربط بتلك الأصول بشيء مثل:

```plaintext
"assets": {
  	"svg_esd_heart": "assets/esd-heart.svg"
}

```

---

_[View the full topic](https://meta.discourse.org/t/emoji-mention-theme-component/90125)._