Change icon of any module in PWA screen

The components in VibeBP come with their own icon set. The icons run on filter : vibebp_component_icon , the usual icon size is 24px x 24px

  1. Download a suitable SVG icon [ checkout https://feathericons.com]
  2. Copy the svg icon code
  3. Note the component’s name. Also available in url as #component=COMPONENT-NAME
  4. Add below code in your child theme – functions.php

 


add_filter('vibebp_component_icon'function($icon,$compoent({
if($id == 'wishlist'){ // 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;
},10,2);

view raw

functions.php

hosted with ❤ by GitHub

 

Was this article helpful?

Related Articles

Leave A Comment?