How to change an icon in PWA WPLMS v4

[kenetork]

Hi, I am having troubles editing the icon in PWA I need to add this icon: https://feathericons.com/?query=monitor I had this code before: add_filter('vibebp_component_icon',function($icon,$compoent){ if($compoent == 'course'){ // Check component id , set $icon as svg $icon = '<svg width="24" height="24" viewBox="0 0 24 24" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"> <path d="M15.473,19.593C14.365,20.679 13.198,21.812 12,23C5.57,16.619 0,11.853 0,7.192C0,0.423 8.852,-1.154 12,4.248C15.125,-1.114 24,0.4 24,7.192C24,7.938 23.844,8.688 23.577,9.445C22.461,8.543 21.043,8 19.5,8C15.916,8 13,10.916 13,14.5C13,16.563 13.97,18.401 15.473,19.593Z" style="fill-opacity:0.6;fill-rule:nonzero;"/> <path d="M19.5,10C17.017,10 15,12.015 15,14.5C15,16.985 17.017,19 19.5,19C21.983,19 24,16.985 24,14.5C24,12.015 21.983,10 19.5,10ZM22,15L20,15L20,17L19,17L19,15L17,15L17,14L19,14L19,12L20,12L20,14L22,14L22,15Z" style="fill-rule:nonzero;"/></svg>'; } return $icon; I am not familiar with which specific part of the svg code i need to edit from copying and pasting it fro that webste, you please explain about this so I can edit it inside my wplms-customizer plugin? Thanks!

[Veronica]

hi you need to follow this tip: https://docs.wplms.io/developer-guide/customisation-tips#tip-1-change-icons-of-components-in-pwa all the steps are mentioned here you need to follow the exact same

[kenetork]

Well, this is not helping me, I sent the code considering the svg issue, I have, I am confused about which specific part I need to copy and paste to replae the icon, could you please be more specific helping me with this? I sent you the new icon I need but the codeis not working properly. Please elaborate, I already read that guide with no success... Thanks in advance!

[Veronica]

hi this is the path of your selected SVG <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-monitor"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg> and in the above code you can add it like:

add_filter('vibebp_component_icon',function($icon,$compoent){

if($compoent == 'course'){ // Check component id , set $icon as svg
$icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-monitor"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>';
}
return $icon;

[kenetork]

Great, thanks this worked, you can close this topic!

[Veronica]

thanks for your confirmation

[Author]

Posts