@licklist/design 0.66.8-dev.2 → 0.66.9-dev.1

package/src/custom-fields/{constants.tsx → constants.ts}

@@ -3,19 +3,18 @@ import {
   CUSTOM_FIELD_TYPE_DROPDOWN,
   CUSTOM_FIELD_TYPE_INPUT,
 } from "@licklist/core/dist/DataMapper/Order/CustomFieldDataMapper";
-import { FaFont, FaListOl } from "react-icons/fa";
 import { SORTABLE_ID_KEY } from "../sortable-list";
 
 export const FIELD_TYPES = {
   [CUSTOM_FIELD_TYPE_INPUT]: {
     id: "1",
     label: "Text Input",
-    icon: <FaFont size={32} />,
+    icon: "font",
   },
   [CUSTOM_FIELD_TYPE_DROPDOWN]: {
     id: "2",
     label: "Dropdown",
-    icon: <FaListOl size={32} />,
+    icon: "list-ol",
   },
 };
 

package/src/custom-fields/field/FieldItem.tsx

@@ -1,18 +1,17 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-
-import { ReactElement } from "react";
+import { Icon } from "../../static";
 
 interface FieldItemProps {
   label: string;
-  icon: ReactElement;
+  icon: string;
   onClick: () => void;
 }
 
 export function FieldItem({ label, icon, onClick }: FieldItemProps) {
   return (
     <div className="custom-field-item" onClick={onClick}>
-      {icon}
+      <Icon type={icon} height="2rem" />
       <h6>{label}</h6>
     </div>
   );

package/src/custom-fields/forms/DropdownForm.tsx

@@ -11,7 +11,7 @@ import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permi
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 import { FieldNamePrefixPath } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
 import { Option } from "@licklist/core/dist/DataMapper/Order/CustomFieldDataMapper";
-import { FaPlus, FaTrashAlt } from "react-icons/fa";
+import { Icon } from "../../static";
 
 interface DropdownFormProps<T>
   extends FieldNamePrefixPath<T>,
@@ -178,7 +178,7 @@ export function DropdownForm<T>({
                     trigger();
                   }}
                 >
-                  <FaTrashAlt size={20} />
+                  <Icon type="trash-alt" height="1.2rem" />
                 </button>
               </Form.Group>
             </div>
@@ -196,7 +196,7 @@ export function DropdownForm<T>({
             resetOptionsError();
           }}
         >
-          <FaPlus size={18} />
+          <Icon type="plus" height="1.1rem" width=".8rem" />
         </Button>
       </div>
       <div className="manual-form-error">

package/src/events/edit-recurrent-event-modal/EditRecurrentEventModal.tsx

@@ -1,7 +1,7 @@
 import { Form, Modal, Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { Controller, useForm } from "react-hook-form";
-import { FaTimes } from "react-icons/fa";
+import Icon from "../../static/Icon";
 
 export const MODE_THIS_EVENT = "thisEvent";
 export const MODE_THIS_AND_FOLLOWING_EVENTS = "thisAndFollowingEvents";
@@ -62,7 +62,7 @@ export const EditRecurrentEventModal = ({
         <Modal.Header className="border-0">
           <Modal.Title as="h6">{title}</Modal.Title>
           <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
-            <FaTimes size={16} />
+            <Icon type="times" height="1rem" />
           </Button>
         </Modal.Header>
         <Modal.Body className="p-0 ml-4">

package/src/events/event-card/EventCard.tsx

@@ -12,13 +12,7 @@ import { useTranslation } from "react-i18next";
 import * as Config from "@licklist/core/dist/Config";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
-import {
-  FaEye,
-  FaExternalLinkAlt,
-  FaEdit,
-  FaCopy,
-  FaTrashAlt,
-} from "react-icons/fa";
+import Icon from "../../static/Icon";
 import { Sale } from "../../types/bookings";
 import { TipTapEditor } from "../../tiptap-editor/TipTapEditor";
 import {
@@ -165,8 +159,7 @@ export function EventCard({
               <ChartBarIcon />
             </button>
             <div className="event-card-views">
-              <FaEye />
-
+              <Icon type="eye" />
               <span>{formatNumber(totalViews)}</span>
             </div>
           </div>
@@ -176,7 +169,7 @@ export function EventCard({
               className="event-card-link-button"
               onClick={onPreview}
             >
-              <FaExternalLinkAlt />
+              <Icon type="external-link-alt" />
             </button>
             {hasPermission && (
               <>
@@ -185,21 +178,21 @@ export function EventCard({
                   className="event-card-link-button"
                   onClick={onEdit}
                 >
-                  <FaEdit />
+                  <Icon type="edit" />
                 </button>
                 <button
                   type="button"
                   className="event-card-link-button"
                   onClick={onCopy}
                 >
-                  <FaCopy />
+                  <Icon type="copy" />
                 </button>
                 <button
                   type="button"
                   className="event-card-link-button"
                   onClick={onRemove}
                 >
-                  <FaTrashAlt />
+                  <Icon type="trash-alt" />
                 </button>
               </>
             )}

package/src/events/event-statistic-modal/EventStatisticModal.tsx

@@ -2,7 +2,7 @@ import { Modal, Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
 import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
-import { FaTimes } from "react-icons/fa";
+import Icon from "../../static/Icon";
 import { StaticTable } from "../../table";
 import { useTableData } from "./hooks/useTableData";
 
@@ -44,7 +44,7 @@ export const EventStatisticModal = ({
           className="btn-sm rounded"
           onClick={handleClose}
         >
-          <FaTimes size={16} />
+          <Icon type="times" height="1rem" />
         </Button>
       </Modal.Header>
       <Modal.Body>

package/src/events/event-venue-map/components/ZoomButtons/ZoomButtons.tsx

@@ -1,5 +1,5 @@
 import { Button } from "react-bootstrap";
-import { FaSearch } from "react-icons/fa";
+import { Icon } from "../../../../static";
 import { useZoom } from "../../hooks/useZoom";
 import { CanvasRefs } from "../../types";
 
@@ -13,7 +13,7 @@ export const ZoomButtons = ({
     <div className="zoom-buttons">
       <div className="buttons-wrapper">
         <div className="icon-wrapper mb-1">
-          <FaSearch size={16} />
+          <Icon type="search" width="1rem" height="1rem" />
         </div>
         <Button onClick={onZoomOut} className="mb-1">
           -

package/src/file-upload/FilePreview.tsx

@@ -4,8 +4,8 @@ import {
 } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
 import { Attachment } from "@licklist/core/dist/DataMapper/Notification/AttachmentDataMapper";
 import { AttachmentMetadata } from "@licklist/core/dist/DataMapper/Notification/AttachmentMetadataDataMapper";
-import { FaFile, FaFilePdf, FaTimes } from "react-icons/fa";
-import { Image as ImageComponent } from "../static";
+
+import { Icon, Image as ImageComponent } from "../static";
 
 type Item = File | Image | Attachment | AttachmentMetadata;
 
@@ -65,7 +65,7 @@ export function PreviewItem({ disabled, item, onRemove }: PreviewItemProps) {
         }}
         disabled={disabled}
       >
-        <FaTimes />
+        <Icon type="times" height="1rem" />
       </button>
       {renderItemPreview(item)}
     </div>
@@ -129,7 +129,11 @@ const renderFileTypeIcon = (itemName?: string) => {
 
   return (
     <div className="preview-item__file">
-      {isPdfFile ? <FaFilePdf size={80} /> : <FaFile size={80} />}
+      {isPdfFile ? (
+        <Icon type="file-pdf" height="5rem" />
+      ) : (
+        <Icon type="file" height="5rem" />
+      )}
     </div>
   );
 };

package/src/header/Header.stories.tsx

@@ -1,4 +1,5 @@
 import Nav from "react-bootstrap/Nav";
+import Icon from "../static/Icon";
 import StyledButton from "../static/StyledButton";
 import BookeditHeader from "./BookeditHeader";
 import CompanySelector from "./elements/CompanySelector";
@@ -28,7 +29,7 @@ export const Licklist = () => (
           <ul className="navbar-nav bd-navbar-nav flex-row navbar-nav-primary">
             <li className="nav-item px-3 px-sm-3 px-lg-4">
               <Nav.Link href="#">
-                <FaSearch />
+                <Icon type="search" />
               </Nav.Link>
             </li>
             <li className="nav-item px-3 px-sm-4 d-none d-sm-inline">

package/src/help/popover/HelpPopover.tsx

@@ -5,7 +5,7 @@ import OverlayTrigger from "react-bootstrap/OverlayTrigger";
 import Popover from "react-bootstrap/Popover";
 import { ButtonVariant } from "react-bootstrap/types";
 import clsx from "clsx";
-import { FaQuestion } from "react-icons/fa";
+import Icon from "../../static/Icon";
 
 export type HelpPopoverProps = {
   children?: React.ReactElement | React.ReactElement[];
@@ -47,7 +47,7 @@ export function HelpPopover({
           {...triggerHandler}
           className="btn-icon-popover rounded-circle px-2 py-1 d-inline-flex align-items-center"
         >
-          {icon ?? <FaQuestion size={10} />}
+          {icon ?? <Icon type="question" style={{ width: "10px" }} />}
         </Button>
       )}
     </OverlayTrigger>

package/src/iframe/event/event-booking-products/components/AccordionItem/AccordionItem.tsx

@@ -9,10 +9,10 @@ import {
   OrderItems,
 } from "@licklist/plugins/dist/types/context/Iframe/orderItems";
 import { Product } from "@licklist/plugins/dist/types/context/sale/menuSteps";
-import { useContext } from "react";
-import { FaAngleRight, FaTimes } from "react-icons/fa";
 import { NumberInput } from "../../../../../static";
+import Icon from "../../../../../static/Icon";
 import { SetOrderFn } from "../../../../../types";
+import { useContext } from "react";
 
 interface CustomToggleProps {
   eventKey: string;
@@ -49,7 +49,7 @@ function CustomToggle({
   return (
     <Card.Header className="accordion-toggle p-4" onClick={decoratedOnClick}>
       <div className={contentClassName}>{children}</div>
-      <FaAngleRight className={iconClassName} size={24} />
+      <Icon className={iconClassName} type="angle-right" height="1.5rem" />
     </Card.Header>
   );
 }
@@ -152,7 +152,12 @@ function ProductItem({
           value={order[id]?.quantity || 0}
           className="product-item__counter"
         />
-        <FaTimes className="product-item__icon m-3" size={16} />
+        <Icon
+          className="product-item__icon m-3"
+          type="times"
+          height="1rem"
+          width="1rem"
+        />
         <div className="product-item__price">
           {formatNumber(price * (order[id]?.quantity || 1), {
             style: "currency",

package/src/iframe/event/event-navigation-footer/EventNavigationFooter.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
 import Button from "react-bootstrap/Button";
 import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
-import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
+import Icon from "../../../static/Icon";
 
 interface PaginationDotsProps {
   amount: number;
@@ -54,7 +54,7 @@ export function EventNavigationFooter({
         className="event-fixed-footer__prev-btn m-0"
         onClick={onPrevButtonClick}
       >
-        <FaArrowLeft size={16} />
+        <Icon type="arrow-left" width="1rem" />
       </Button>
       {amount > 1 && (
         <PaginationDots amount={amount} activeElement={activeElement} />
@@ -67,12 +67,11 @@ export function EventNavigationFooter({
           {...submitButtonProps}
         >
           {t("continue")}
-          <FaArrowRight size={16} className="ml-2" />
+          <Icon type="arrow-right" width="1rem" className="ml-2" />
         </Button>
       ) : (
         <Button className="m-0" onClick={onNextClick}>
-          {t("next")}
-          <FaArrowRight size={16} className="ml-2" />
+          {t("next")} <Icon type="arrow-right" width="1rem" className="ml-2" />
         </Button>
       )}
     </>

package/src/iframe/order-process/components/BookingSummary/components/ToggleHeader/ToggleHeader.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useAccordionToggle } from "react-bootstrap/AccordionToggle";
 import AccordionContext from "react-bootstrap/AccordionContext";
 import clsx from "clsx";
-import { FaChevronDown, FaChevronUp } from "react-icons/fa";
+import { Icon } from "../../../../../../static";
 import { ACCORDION_KEY } from "../../types";
 
 type ToggleHeaderProps = {
@@ -91,11 +91,14 @@ const HeaderContent = ({
           <p className="m-0 mr-2 toggle-title">{title || t("yourBooking")}</p>
           {showExpandButton && (
             <div className="expand-button">
-              {currentEventKey === ACCORDION_KEY ? (
-                <FaChevronUp size={8} />
-              ) : (
-                <FaChevronDown size={8} />
-              )}
+              <Icon
+                type={
+                  currentEventKey === ACCORDION_KEY
+                    ? "chevron-up"
+                    : "chevron-down"
+                }
+                width="0.5rem"
+              />
             </div>
           )}
         </div>
@@ -111,11 +114,12 @@ const HeaderContent = ({
 
       {showExpandButton && (
         <div className="expand-button">
-          {currentEventKey === ACCORDION_KEY ? (
-            <FaChevronUp size={16} />
-          ) : (
-            <FaChevronDown size={16} />
-          )}
+          <Icon
+            type={
+              currentEventKey === ACCORDION_KEY ? "chevron-up" : "chevron-down"
+            }
+            width="1rem"
+          />
         </div>
       )}
     </>

package/src/iframe/order-process/components/CalendarStepsForm/components/CategoryProductModal.tsx

@@ -7,8 +7,8 @@ import {
   Product,
   ProductCategory,
 } from "@licklist/plugins/dist/types/context/sale/menuSteps";
-import { FaTimes } from "react-icons/fa";
 import { CategoryProduct } from "../../CategoryProduct";
+import Icon from "../../../../../static/Icon";
 
 export type CategoryProductModalProps = {
   activePointId?: number;
@@ -57,7 +57,7 @@ export const CategoryProductModal = ({
           className="btn-sm rounded"
           onClick={onCloseModal}
         >
-          <FaTimes />
+          <Icon type="times" height="1rem" />
         </Button>
       </div>
     </div>

package/src/iframe/order-process/components/ErrorModal/ErrorModal.tsx

@@ -4,7 +4,7 @@ import ModalHeader from "react-bootstrap/ModalHeader";
 import ModalTitle from "react-bootstrap/ModalTitle";
 import ModalBody from "react-bootstrap/ModalBody";
 import Modal from "react-bootstrap/Modal";
-import { FaTimes } from "react-icons/fa";
+import Icon from "../../../../static/Icon";
 
 export interface ErrorModalProps {
   isOpen: boolean;
@@ -43,7 +43,7 @@ export const ErrorModal = ({
           className="btn-sm rounded"
           onClick={handleClose}
         >
-          <FaTimes />
+          <Icon type="times" height="1rem" />
         </Button>
       </ModalHeader>
       <ModalBody className="confirmation-modal-body">

package/src/iframe/order-process/components/NavigationFooter/NavigationFooter.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import Button from "react-bootstrap/Button";
-import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
+import Icon from "../../../../static/Icon";
 
 interface NavigationFooterProps {
   onPrevStep: () => void;
@@ -32,12 +32,12 @@ export const NavigationFooter = ({
         className="event-fixed-footer__prev-btn m-0"
         onClick={onPrevButtonClick}
       >
-        <FaArrowLeft />
+        <Icon type="arrow-left" width="1rem" />
       </Button>
 
       <Button className="m-0" disabled={isButtonDisabled} {...buttonProps}>
         {nextButtonLabel ?? t("continue")}
-        <FaArrowRight className="ml-2" />
+        <Icon type="arrow-right" width="1rem" className="ml-2" />
       </Button>
     </div>
   );

package/src/iframe/order-process/components/PaymentCard/PaymentCard.tsx

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl";
 import * as Config from "@licklist/core/dist/Config";
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import { PaymentDetail } from "@licklist/core/dist/DataMapper/Order/PaymentDetailDataMapper";
-import { FaCreditCard } from "react-icons/fa";
+import { Icon } from "../../../../static";
 
 export type PaymentCardProps = {
   discountBlock?: ReactNode;
@@ -71,7 +71,7 @@ export const PaymentCard: FC<PaymentCardProps> = ({
   return (
     <div className="payment-card">
       <div className="title">
-        <FaCreditCard />
+        <Icon type="credit-card" />
         <p className="m-0">{t("Design:payment")}</p>
       </div>
       <div className="payment-summary mb-5">

package/src/iframe/order-process/components/Timer/Timer.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
-import { FaStopwatch } from "react-icons/fa";
 import { fancyTimeFormat } from "./utils";
+import { Icon } from "../../../../static";
 
 export type TimerProps = {
   timer: number;
@@ -14,7 +14,7 @@ export const Timer = ({ timer }: TimerProps) => {
       <div className="timer-wrapper ">
         <div className="timer">
           <div className="d-flex align-items-center">
-            <FaStopwatch />
+            <Icon type="stopwatch" />
           </div>
           <div className="time">{fancyTimeFormat(timer)}</div>
         </div>

package/src/image-radio-input/ImageRadioInput.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta, Story } from "@storybook/react";
 import { FormProvider, useForm } from "react-hook-form";
-import { FaBars } from "react-icons/fa";
 import { ImageRadioInput, ImageRadioInputProps } from "./ImageRadioInput";
 import { ReactComponent as MonthIcon } from "../assets/widgets/monthCalendar.svg";
+import Icon from "../static/Icon";
 
 export default {
   title: "ImageRadioInput",
@@ -30,7 +30,7 @@ Default.args = {
 };
 
 export const WithFontAwesomeIcon: Story<ImageRadioInputProps<FormModel>> = (
-  args,
+  args
 ) => {
   const form = useForm();
 
@@ -42,7 +42,7 @@ export const WithFontAwesomeIcon: Story<ImageRadioInputProps<FormModel>> = (
 };
 
 WithFontAwesomeIcon.args = {
-  img: <FaBars />,
+  img: <Icon type="bars" />,
   label: "List",
   name: "test",
 };

package/src/modals/confirmation/ConfirmModal.tsx

@@ -6,7 +6,7 @@ import ModalTitle from "react-bootstrap/ModalTitle";
 import ModalBody from "react-bootstrap/ModalBody";
 import ModalFooter from "react-bootstrap/ModalFooter";
 import Modal from "react-bootstrap/Modal";
-import { FaTimes } from "react-icons/fa";
+import Icon from "../../static/Icon";
 
 export type ConfirmAction = () => void;
 export const ConfirmModalType = {
@@ -91,7 +91,7 @@ export function ConfirmModal({
             onClick={handleClose}
             data-id={CONFIRM_MODAL_ACTION_DECLINE}
           >
-            <FaTimes size={16} />
+            <Icon type="times" height="1rem" />
           </Button>
         </ModalHeader>
         <ModalBody className="confirmation-modal-body">

package/src/modals/fullscreen/FullscreenModal.tsx

@@ -6,7 +6,7 @@ import ModalTitle from "react-bootstrap/ModalTitle";
 import ModalBody from "react-bootstrap/ModalBody";
 import ModalFooter from "react-bootstrap/ModalFooter";
 import Modal from "react-bootstrap/Modal";
-import { FaTimes } from "react-icons/fa";
+import Icon from "../../static/Icon";
 
 export interface FullscreenModalProps {
   children?: (confirm: () => void) => ReactNode;
@@ -63,7 +63,7 @@ export const FullscreenModal = ({
               className="btn-sm rounded"
               onClick={handleClose}
             >
-              <FaTimes size={16} />
+              <Icon type="times" height="1rem" />
             </Button>
           </ModalHeader>
         )}

package/src/notification/email-template/card/EmailTemplateCard.tsx

@@ -2,8 +2,8 @@ import { Link } from "react-router-dom";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { useTranslation } from "react-i18next";
 import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
-import { FaTrashAlt, FaCopy } from "react-icons/fa";
 import { ConfirmModal, ConfirmModalType } from "../../../modals";
+import { Icon } from "../../../static";
 import { useTranslatedParameters } from "../../hooks/useTranslatedParameters";
 
 export interface EmailTemplateCardProps extends HasPermissionProp {
@@ -53,7 +53,7 @@ export function EmailTemplateCard({
                   confirm(onRemove);
                 }}
               >
-                <FaTrashAlt />
+                <Icon type="trash-alt" />
               </button>
             )}
           </ConfirmModal>
@@ -63,7 +63,7 @@ export function EmailTemplateCard({
           className="snippet-template-card-button"
           onClick={onDuplicate}
         >
-          <FaCopy />
+          <Icon type="copy" />
         </button>
       </div>
       <div className={`mt-${isDefault ? "3" : "4"}`}>

package/src/notification/sms-template/card/SmsTemplateCard.tsx

@@ -2,8 +2,8 @@ import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
-import { FaCopy, FaTrashAlt } from "react-icons/fa";
 import { ConfirmModal, ConfirmModalType } from "../../../modals";
+import { Icon } from "../../../static";
 import { useTranslatedParameters } from "../../hooks/useTranslatedParameters";
 
 export interface SmsTemplateCardProps extends HasPermissionProp {
@@ -51,7 +51,7 @@ export function SmsTemplateCard({
                   confirm(onRemove);
                 }}
               >
-                <FaTrashAlt />
+                <Icon type="trash-alt" />
               </button>
             )}
           </ConfirmModal>
@@ -61,7 +61,7 @@ export function SmsTemplateCard({
           className="snippet-template-card-button"
           onClick={onDuplicate}
         >
-          <FaCopy />
+          <Icon type="copy" />
         </button>
       </div>
       <div className="mt-2">

package/src/product-set/card/ProductSetCard.tsx

@@ -6,8 +6,9 @@ import clsx from "clsx";
 import { useId } from "@react-aria/utils";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
-import { FaEllipsisH, FaEye, FaTrashAlt } from "react-icons/fa";
+
 import { ConfirmModal } from "../../modals";
+import { Icon } from "../../static";
 import { MenuButton } from "../../table/MenuButton";
 
 export interface ProductSetCardProps extends HasPermissionProp {
@@ -58,7 +59,7 @@ export function ProductSetCard({
         </div>
         <div className="d-flex">
           <div className="product-set-card-menu-eye-container">
-            <FaEye color="#0E8CE2" size={20} />
+            <Icon type="eye" color="#0E8CE2" width="20" />
           </div>
           <OverlayTrigger
             trigger="click"
@@ -105,7 +106,7 @@ export function ProductSetCard({
                                   confirm(onRemove);
                                 }}
                                 name={t("remove")}
-                                icon={<FaTrashAlt size={12} />}
+                                icon="trash-alt"
                                 className="product-set-card-menu-item-text d-flex w-100 align-items-center"
                                 rightIcon
                               />
@@ -127,7 +128,7 @@ export function ProductSetCard({
                 setIsOverlayVisible(true);
               }}
             >
-              <FaEllipsisH />
+              <Icon type="ellipsis-h" />
             </button>
           </OverlayTrigger>
         </div>