.svg-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  padding: 0;

  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;

  background-color: var(--svg-btn-color, #333); 
}

.svg-btn:hover {
  background-color: var(--svg-btn-hover-color, var(--svg-btn-color, #ccc)); 
}

/* 按鈕圖示 */
.ic-menu {
  mask-image: url('../icons/menu.svg');
  -webkit-mask-image: url('../icons/menu.svg');

  /* 如有需要可個別設定顏色 
  --svg-btn-color: #ff6600;         
  --svg-btn-hover-color: #fffb00;  */
}
/*--首頁 header nav button icon with hover effect
.ic-search {
  mask-image: url('../icons/search.svg');
  -webkit-mask-image: url('../icons/search.svg');
}

.ic-manage {
  mask-image: url('../icons/account.svg');
  -webkit-mask-image: url('../icons/account.svg');
}

.ic-shop {
  mask-image: url('../icons/cart.svg');
  -webkit-mask-image: url('../icons/cart.svg');
}--*/

.ic-information {
  width: 40px;
  height: 40px;
  mask-image: url('../icons/information.svg');
  -webkit-mask-image: url('../icons/information.svg');
  --svg-btn-color: #000;
  --svg-btn-hover-color: #000;
}

.ic-cart {
  width: 40px;
  height: 40px;
  mask-image: url('../icons/cart.svg');
  -webkit-mask-image: url('../icons/cart.svg');
  --svg-btn-color: #fff;         
  --svg-btn-hover-color: #fff; 
}