كيفية استبدال أيقونة SVG موجودة بأيقونة مخصصة؟

[Phlipups]

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

ما أود فعله هو استخدام أيقونة إعجاب مخصصة من هنا - Font Awesome، مع استخدام النسخة ذات الخطوط المحدودة كأيقونة لـ “غير معجب بها”. هل هذا ممكن؟ وبما أنها أيقونة مدفوعة، هل يجب عليّ تحميلها أو إنشاء أيقونة خاصة بي وإضافتها كأيقونة أو رمز تعبيري مخصص، ثم تطبيقها على مكوّن أيقونة الإعجاب؟ لست متأكدًا من كيفية القيام بذلك أيضًا.
لقد قمت بتثبيت مكوّن “تغيير أيقونة الإعجاب” واختبرته على سمة غير مستخدمة، وقد عمل كما هو متوقع.

أظن أنه إذا أردت استخدام أيقونة مخصصة خاصة بك، فلا يمكنك استخدام المكوّن في نفس الوقت، حيث يبدو أن أيقونة الإبهام المرفوع تتجاوز كل شيء. لذا قمت بإزالته وأضفت هذا الكود إلى منطقة الرأس (Header) في قسم HTML المخصص لتلك السمة:

  api.replaceIcon('d-liked', 'fa-pig');
  api.replaceIcon('d-unliked', 'fal-pig');
  api.replaceIcon('notification.liked', 'fa-pig');
  api.replaceIcon('notification.liked_2', 'fa-pig');
  api.replaceIcon('notification.liked_many', 'fa-pig');
  api.replaceIcon('notification.liked_consolidated', 'fa-pig');      
  api.replaceIcon('d-unliked', 'fal-pig');
  api.replaceIcon('notification.liked', 'fa-pig');
  api.replaceIcon('notification.liked_2', 'fa-pig');
  api.replaceIcon('notification.liked_many', 'fa-pig');
  api.replaceIcon('notification.liked_consolidated', 'fa-pig');      
  api.replaceIcon('heart', 'fa-pig');

في مجموعة أيقونات SVG، أضفت fa-pig و fal-pig، ولكن عند المعاينة تظهر أيقونة الإعجاب فارغة. أفترض أن ذلك لأنني لا أملك أيقونة الخنزير مثبتة فعليًا. لذا جربت أيقونة “البنك الصغير” (piggy-bank) التي يُفترض أنها مجانية، وأضفتها إلى مجموعة الأيقونات، ومع ذلك ظلت أيقونة الإعجاب فارغة.

من الواضح أنني أقوم بشيء خاطئ. حاولت تحميل أصل (Asset) إلى سمة الاختبار هذه باسم icons-sprite بصيغة SVG، وسمح لي بتحميل واحدة، لكن لا يمكنني تسمية تحميلين مختلفين بنفس اسم المتغير Icons-sprite. في كلتا الحالتين، تظل الأيقونة فارغة حتى مع التحميل الواحد.

أعمل في مجال تقنية المعلومات، لكنني مبتدئ جدًا في برمجة أي من هذه الأمور المتقدمة المتعلقة بـ Discourse.

أي مساعدة ستكون محل تقدير، شكرًا لكم.

[pfaffman (Jay Pfaffman)]

أنا لست خبيرًا في هذه الأمور…

@Phlipups

بما أنها أيقونة Pro،

ربما يمكنك الاطلاع على Discourse FontAwesome Pro

[pmusaraj (Penar Musaraj)]

@Phlipups

في مجموعة أيقونات SVG التي أضفتها، أضفت fa-pig و fal-pig، ولكن عند المعاينة، تظهر أيقونة الإعجاب فارغة. أفترض أن السبب هو أنني لم أقم بتثبيت أيقونة Pig فعليًا. لذا جربت أيقونة piggy-bank التي يُفترض أنها مجانية، وأضفتها إلى مجموعة الأيقونات، ومع ذلك ظلت أيقونة الإعجاب فارغة.

يجب أن تعمل أيقونة piggy-bank، ولكنك تحتاج إلى إضافتها بدون أي بادئات في إعداد موقع مجموعة أيقونات SVG وفي دوال تجاوز JS.

أيقونات Pro غير مدرجة في النواة، لذا بالنسبة لأيقونة pig المخصصة لـ Pro فقط، يمكنك استخدام الإضافة التي اقترحها Jay أعلاه، أو يمكنك إنشاء Sprite خاص بك. تأكد من مراجعة ملف Sprite SVG المثال المرتبط في المنشور الأصلي، حيث يتطلب الـ Sprite بنية محددة تحتوي على رموز ومعرفات (ثم يُستخدم المعرف في استدعاءات واجهة برمجة التطبيقات في JS).

[Phlipups]

لذلك جربت مرة أخرى وأضفت أيقونة ‘الكنز’ إلى مجموعة أيقونات SVG. أضفت كود JavaScript إلى الرأس مرة أخرى وأشرت إلى ‘Piggy-Bank’ وعمل الأمر بشكل صحيح في النهاية! شكرًا لك! الآن، المشكلة الوحيدة مع هذه الأيقونة هي أن المنشورات التي تم الإعجاب بها وتلك التي لم يتم الإعجاب بها تبدو متطابقة تمامًا، فلا توجد نسخة مفرغة للمنشورات غير المعجب بها. عند فتح موقع Font Awesome مرة أخرى، لاحظت أن النسخ المفرغة للأيقونة متاحة فقط في النسخة الاحترافية (PRO). لذا، سقطت هذه الفكرة. لست مستعدًا لإنفاق مائة دولار سنويًا مقابل أيقونة واحدة، فنحن منظمة غير ربحية ولا ن收取 رسوم عضوية.

لذا، أعتقد أنني عدت إلى إنشاء أيقونتي الخاصة. سأراجع تلك الإرشادات مرة أخرى.

[pfaffman (Jay Pfaffman)]

@Phlipups

الآن، المشكلة الوحيدة مع أيقونة معينة هي أن المنشورات المُعجب بها والمنشورات غير المُعجب بها تبدو متطابقة تمامًا، فلا توجد نسخة مرسومة بخط خارجي للمنشورات غير المُعجب بها.

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

[Phlipups]

حسناً، لقد جربت بعض الأشياء لإنشاء ملف خاص بي. للأسف، الرابط الموجود في المنشور الأصلي لعرض مثال حول كيفية تنسيق ملف SVG Sprites لا يعمل؛ فهو يفتح صفحة فارغة ولا يتم تحميله. لذا، قمت بالمحاولة على عجل. قمت بإنشاء رسومي SVG في Illustrator، ثم exported them، ثم فتحتها في Chrome واستخدمت خيار ‘فحص العنصر’ للحصول على معلومات مسار الملف.

أنا أستخدم جهاز Mac، لذا فتحت TextEdit ونسخت المعلومات التي أعتقد أنها يجب أن تكون في ملف Sprite. ثم غيرت الامتداد إلى svg. قمت برفع الملف إلى المظهر وأضفت كود JavaScript إلى الرأس (Header).

مرة أخرى، لست متأكداً مما إذا كان أي من هذا صحيحاً، بل أنا متأكد تقريباً أنه ليس كذلك، لأنه عند معاينة المظهر للموقع، ينهار الموقع تماماً. أحصل على خطأ “Oops” – “واجهت البرمجية التي تدعم هذا المنتدى مشكلة غير متوقعة.” بعد إزالة ملف Sprite.svg الذي تم رفعه وانتظار بعض الوقت، يعود الموقع للعمل بشكل صحيح مرة أخرى.

فيما يلي معلومات ملف SVG والكود JSON.

شكراً لكم!

إليك رابط ملف Sprite على Google Drive إذا كان أحدكم مهتماً بالنظر إليه: Drive

والكود هو:

[pmusaraj (Penar Musaraj)]

لا يجب إضافة icons-sprite مرتين.

هل يمكنك نشر مسارات SVG في كتلة كود؟ أعتقد أنك تواجه مشاكل في وضع الأيقونات في صورة رمزية، ويمكنني المساعدة في ذلك.

[Phlipups]

شكرًا لك! هل هذا ما تبحث عنه؟

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- تم أخذ صندوق العرض (ViewBox) والمضلّع من "SVGpig.svg" -->
  <symbol id="ids-SVGpig" width="616px" height="425px" viewBox="0 0 616 425">
    <path xmlns="http://www.w3.org/2000/svg" fill="#060709" d="M184.131,400.155c2.827,0.205,3.614-5.244,7.953-7.232c4.652-7.228,0,0,7.627-10.233    c-0.112,0.04,6.764-6.983,6.651-6.942c6.519-17.718,21.288-36.328,29.468-53.35c53.678,30.022,119.689,40.696,178.843,21.456    c2.529-0.931,3.49,2.748,4.203,4.525c3.127,12.466,2.592,25.449,2.285,38.221c1.147,7.776-6.405,14.642-5.161,22.4    c4.807-0.332,19.038,0.231,23.851,0.298c2.355-7.332,1.213-5.049,4.524-12.042c0.322-0.68,4.927-10.54,5.377-10.93    c4.667-11.476,9.501-22.896,14.743-34.119c5.729,11.479,7.265,24.374,9.339,36.882c-0.092,0.01-0.183,0.021-0.275,0.03    c3.219,10.044-1.754,20.419-0.559,30.879c8.474,0.214,23.744-0.615,32.184-1.483c0.118-3-0.39-5.761-0.319-8.759    c3.064-13.446,9.544-26.351,14.214-39.303c1.83-5.448,6.072-11.021,3.807-16.972c-2.982-9.171-2.917-18.918-2.855-28.449    c-0.184-7.692,6.717-12.547,10.316-18.613c30.147-44.639,37.913-101.296,30.606-153.864c13.341-4.319,29.918-11.775,31.892-27.499    c-0.446-9.285,19.679-20.46,17.656-29.556c-5.111,2.487-19.541,7.725-22.192,10.497c-3.552-1.966-7.667-5.363-11.912-3.354    c-4.239,2.356-7.504,7.027-7.651,11.936c0.809,4.973,6.115,7.092,9.712,9.815c-5.499,6.366-14.325,6.291-22.056,6.453    c-4.471-0.021-9.786,0.26-12.861-3.666c-20.989-23.668-46.85-43.261-76.024-55.694c-32.579-14.011-68.688-18.704-103.914-15.92    c-38.915,2.733-76.397,14.716-112.439,29.032c6.805-24.491,8.647-50.02,8.446-75.34c-27.898,5.61-56.151,13.44-79.849,29.784    c-2.461,1.879-5.58,3.147-8.558,1.596c-18.286-7.325-38.642-11.424-58.18-7.058c-16.763,3.533-31.39,14.275-41.46,27.907    C62.018,74.314,54.998,90.515,40,97.979c-6.076,0.593-9.563-6.335-13.738-9.771c-6.909,8.871-14.208,17.696-18.813,28.033    c-2.424,4.944,0.913,10.092,3.587,14.148c6.601,9.78,24.814,13.061,35.339,17.317c-5.382,0.674-17.733,2.564-23.123,3.159    c12.034,17.167,26.912,32.841,45.512,42.914c16.032,9.485,31.733,19.516,47.847,28.86c5.072,3,11.006,5.358,14.172,10.658    c7.56,12.251,13.543,25.426,21.329,37.545c2.928,4.184,2.657,9.459,2.343,14.312c-2.448,33.767-8.148,67.191-12.444,100.755    c5.083-0.22,6.743,3.232,11.097,0.655c2.072,2.461,3.037,1.204,7.392,2.496c2.018-6.083,18.703-53.914,20.5-60.062    c0.033,6.355-15.454,62.01-17,68 M77.21,126.644c-5.751-4.765-8.054-13.37-4.71-20.168c1.688-3.971,8.684-5.219,10.362-0.624    C86.532,113.189,82.366,121.266,77.21,126.644z"/>
  </symbol>

  <!-- تم أخذ صندوق العرض (ViewBox) والمضلّع من "SVGpigout.svg" -->
  <symbol id="ids-SVGpigout"  width="621px" height="430px" viewBox="0 0 621 430">
    <path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#060709" stroke-width="8" stroke-miterlimit="10.43" d="M167.5,399.499L194,405    c2.827,0.205,1.084-10.077,1.084-10.077s0,0,7.627-10.233c-0.112,0.04,6.651-6.942,6.651-6.942    c8.885-18.201,21.288-36.328,29.468-53.35c53.678,30.022,119.689,40.696,178.843,21.456c2.529-0.931,3.49,2.748,4.203,4.525    c3.127,12.466,2.592,25.449,2.285,38.221c1.147,7.776-5.405,17.642-4.161,25.4c4.807-0.332,17.453-2.001,22.266-1.935    c2.355-7.332,1.798-5.816,5.109-12.81c0.322-0.68,4.927-10.54,5.377-10.93c4.667-11.476,14.743-34.119,14.743-34.119l9.339,36.882    l-0.275,0.03c0,0,0.246,20.419,1.441,30.879c8.474,0.214,21.744-0.615,30.184-1.483c0.118-3-0.39-5.761-0.319-8.759    c3.064-13.446,9.544-26.351,14.214-39.303c1.83-5.448,6.072-11.021,3.807-16.972c-2.982-9.171-2.917-18.918-2.855-28.449    c-0.184-7.692,6.717-12.547,10.316-18.613c30.147-44.639,37.913-101.296,30.606-153.864c13.341-4.319,29.918-11.775,31.892-27.499    c-0.446-9.285,19.679-20.46,17.656-29.556c-5.111,2.487-19.541,7.725-22.192,10.497c-3.552-1.966-7.667-5.363-11.912-3.354    c-4.239,2.356-7.504,7.027-7.651,11.936c0.809,4.973,6.115,7.092,9.712,9.815c-5.499,6.366-14.325,6.291-22.056,6.453    c-4.471-0.021-9.786,0.26-12.861-3.666c-20.989-23.668-46.85-43.261-76.024-55.694c-32.579-14.011-68.688-18.704-103.914-15.92    c-38.915,2.733-76.397,14.716-112.439,29.032c6.805-24.491,8.647-50.02,8.446-75.34c-27.898,5.61-56.151,13.44-79.849,29.784    c-2.461,1.879-5.58,3.147-8.558,1.596c-18.286-7.325-38.642-11.424-58.18-7.058c-16.763,3.533-31.39,14.275-41.46,27.907    C65.018,76.314,57.998,92.515,43,99.979c-6.076,0.593-9.563-6.335-13.738-9.771c-6.909,8.871-14.208,17.696-18.813,28.033    c-2.424,4.944,0.913,10.092,3.587,14.148c6.601,9.78,24.814,13.061,35.339,17.317c-5.382,0.674-17.733,2.564-23.123,3.159    c12.034,17.167,26.912,32.841,45.512,42.914c16.032,9.485,31.733,19.516,47.847,28.86c5.072,3,11.006,5.358,14.172,10.658    c7.56,12.251,13.543,25.426,21.329,37.545c2.928,4.184,2.657,9.459,2.343,14.312c-2.448,33.767-8.148,67.191-12.444,100.755    c5.083-0.22,6.743,3.232,11.097,0.655c2.072,2.461,3.037,1.204,7.392,2.496c2.018-6.083,12.203-34.414,14-40.562    c0.033,6.355-14,46.666-7,49.999 M80.21,128.644c-5.751-4.765-8.054-13.37-4.71-20.168c1.688-3.971,8.684-5.219,10.362-0.624    C89.532,115.189,85.366,123.266,80.21,128.644z"/>
  </symbol>


</svg>

[Falco]

Discourse Gifs يقدّم أيقونة GIF مخصصة يمكنك استخدامها كنموذج:

assets/gif.svg?short_path=61c0681

[pmusaraj (Penar Musaraj)]

حسنًا، جرب استخدام هذا الرابط: Dropbox

لقد أضفتُ فقط استدعاء replaceIcon لـ d-liked، وسيتعين عليك تعديل المكوّن في نسختك وإضافة الأسطر الأخرى. تأكد من استخدام المعرفات الموجودة في ملف SVG، فهي حاليًا ببساطة SVGpig و SVGpigout.

[Phlipups]

رائع! شكرًا لك، لقد نجح الأمر ونجح في تشغيله. مجتمعنا يقدر ذلك. شكرًا جزيلاً!!