@qite/tide-booking-component 1.2.5 → 1.3.1

package/src/booking-wizard/components/icon.tsx

@@ -1,508 +1,508 @@
-import { isEmpty } from "lodash";
-import React, { useContext } from "react";
-import SettingsContext from "../settings-context";
-import HTMLComment from "react-html-comment";
-
-interface IconProps {
-  name: string;
-  className?: string;
-  title?: string;
-  width?: number;
-  height?: number;
-}
-
-const Icon: React.FC<IconProps> = ({
-  name,
-  className,
-  title,
-  width,
-  height,
-}) => {
-  const { icons } = useContext(SettingsContext);
-
-  if (icons) {
-    return (
-      <svg
-        className={["icon", `icon--${name}`, className]
-          .filter((className) => !isEmpty(className))
-          .join(" ")}
-        width={width}
-        height={height}
-      >
-        {title && <title>{title}</title>}
-        <use href={`${icons}#${name}`}></use>
-      </svg>
-    );
-  }
-
-  switch (name) {
-    case "ui-chevron":
-      return (
-        <svg
-          className={["icon", `icon--${name}`, className]
-            .filter((className) => !isEmpty(className))
-            .join(" ")}
-          width={width}
-          height={height}
-          viewBox="0 0 320 512"
-        >
-          <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
-          {title && <title>{title}</title>}
-          <path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
-        </svg>
-      );
-
-    case "ui-error":
-      return (
-        <svg
-          className={["icon", `icon--${name}`, className]
-            .filter((className) => !isEmpty(className))
-            .join(" ")}
-          width={width}
-          height={height}
-          viewBox="0 0 512 512"
-        >
-          <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
-          {title && <title>{title}</title>}
-          <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" />
-        </svg>
-      );
-
-    case "ui-tel":
-      return (
-        <svg
-          className={["icon", `icon--${name}`, className]
-            .filter((className) => !isEmpty(className))
-            .join(" ")}
-          width={width}
-          height={height}
-          viewBox="0 0 512 512"
-        >
-          <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
-          {title && <title>{title}</title>}
-          <path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z" />
-        </svg>
-      );
-
-    case "ui-mail":
-      return (
-        <svg
-          className={["icon", `icon--${name}`, className]
-            .filter((className) => !isEmpty(className))
-            .join(" ")}
-          width={width}
-          height={height}
-          viewBox="0 0 512 512"
-        >
-          <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
-          {title && <title>{title}</title>}
-          <path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z" />
-        </svg>
-      );
-
-    case "ui-trashcan":
-      return (
-        <svg
-          className={["icon", `icon--${name}`, className]
-            .filter((className) => !isEmpty(className))
-            .join(" ")}
-          width={width}
-          height={height}
-          viewBox="0 0 448 512"
-        >
-          <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
-          {title && <title>{title}</title>}
-          <path d="M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z" />
-        </svg>
-      );
-
-    case "ui-home":
-
-    case "ui-filter":
-      return (
-        <svg
-          className={["icon", `icon--${name}`, className]
-            .filter((className) => !isEmpty(className))
-            .join(" ")}
-          width={width}
-          height={height}
-          viewBox="0 0 10.701 9.698"
-        >
-          {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
-          {title && <title>{title}</title>}
-          <g id="filter-solid" transform="translate(-2.667 -5.333)">
-            <path
-              id="Path_54"
-              data-name="Path 54"
-              d="M9.355,15.031V10.517l3.836-3.846a.605.605,0,0,0,.177-.435V5.668a.334.334,0,0,0-.334-.334H3a.334.334,0,0,0-.334.334v.558a.6.6,0,0,0,.177.425L6.68,10.544v3.411Z"
-              transform="translate(0 0)"
-              fill="#12aad8"
-            />
-            <path
-              id="Path_55"
-              data-name="Path 55"
-              d="M13.194,5.333H2.827a.174.174,0,0,0-.161.174v.575A.445.445,0,0,0,2.8,6.4L6.81,10.413v3.344l2.425,1.207V10.406l4.013-4.013a.451.451,0,0,0,.12-.3V5.507a.174.174,0,0,0-.174-.174Z"
-            />
-          </g>
-        </svg>
-      );
-
-    case "ui-close":
-      return (
-        <svg
-          className={["icon", `icon--${name}`, className]
-            .filter((className) => !isEmpty(className))
-            .join(" ")}
-          width={width}
-          height={height}
-          viewBox="0 0 384 512"
-        >
-          <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
-          {title && <title>{title}</title>}
-          <path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
-        </svg>
-      );
-
-    case "ui-ticket":
-      return (
-        <svg
-          className={["icon", `icon--${name}`, className]
-            .filter((className) => !isEmpty(className))
-            .join(" ")}
-          width={width}
-          height={height}
-          viewBox="0 0 20 20"
-        >
-          {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
-          {title && <title>{title}</title>}
-          <g id="ticket" transform="translate(0.439 1.629)">
-            <path
-              id="Path_14"
-              data-name="Path 14"
-              d="M12.125,5.335l3.751,3.751L9.086,15.875,5.335,12.125Zm-2.5,11.62L16.955,9.62a.745.745,0,0,0,0-1.068l-4.3-4.3a.774.774,0,0,0-1.068,0L4.255,11.59a.745.745,0,0,0,0,1.068l4.3,4.3a.774.774,0,0,0,1.068,0ZM20.172,9.395,9.406,20.172a1.533,1.533,0,0,1-2.148,0l-1.5-1.5a2.293,2.293,0,0,0,0-3.228,2.2,2.2,0,0,0-1.614-.665,2.2,2.2,0,0,0-1.614.665l-1.484-1.5a1.533,1.533,0,0,1,0-2.148L11.816,1.05a1.533,1.533,0,0,1,2.148,0l1.484,1.484a2.2,2.2,0,0,0-.665,1.614,2.2,2.2,0,0,0,.665,1.614,2.293,2.293,0,0,0,3.228,0l1.5,1.484a1.533,1.533,0,0,1,0,2.148Z"
-              transform="translate(-1.05 -2.24)"
-            />
-          </g>
-        </svg>
-      );
-
-    case "ui-payback":
-      return (
-        <svg
-          className={["icon", `icon--${name}`, className]
-            .filter((className) => !isEmpty(className))
-            .join(" ")}
-          width={width}
-          height={height}
-          viewBox="0 0 20 20.154"
-        >
-          {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
-          {title && <title>{title}</title>}
-          <g id="layer1" transform="translate(-205.148 -293.014)">
-            <path
-              id="path453469"
-              d="M223.472,306.895a1.674,1.674,0,0,0-1.188.487l-1.971,1.972a1.67,1.67,0,0,0-.978-.726l-4.652-1.247a2.766,2.766,0,0,0-2.182.331l-2.9,1.832-.235-.408a1.089,1.089,0,0,0-1.471-.394l-2.209,1.274a1.089,1.089,0,0,0-.394,1.471l3.291,5.7a1.088,1.088,0,0,0,1.47.4l2.209-1.276a1.09,1.09,0,0,0,.395-1.471l-.043-.076,1.258-.85,4.63.911a1.742,1.742,0,0,0,1.653-.514c1.493-1.527,2.988-3.048,4.505-4.544l0,0a1.675,1.675,0,0,0-1.189-2.863Zm0,1.332a.336.336,0,0,1,.238.1.323.323,0,0,1,0,.476c-1.525,1.5-3.024,3.031-4.518,4.559a1.847,1.847,0,0,1-.433.134l-4.9-.963a.672.672,0,0,0-.507.1l-1.411.954-1.667-2.886,2.947-1.858a1.411,1.411,0,0,1,1.118-.171l4.652,1.247a.336.336,0,1,1-.175.65l-2.92-.782a.672.672,0,0,0-.348,1.3l2.92.782a1.693,1.693,0,0,0,1.741-.572.672.672,0,0,0,.177-.118l2.85-2.852A.336.336,0,0,1,223.472,308.226Zm-15.14,1.812.325.564a.615.615,0,0,0,.253.438l2.445,4.235-1.745,1.008-3.024-5.237Z"
-              transform="translate(0 -4.554)"
-              fill-rule="evenodd"
-            />
-            <path
-              id="path453459"
-              d="M223.672,301.014a.672.672,0,1,0,0,1.344h1.344a.672.672,0,1,0,0-1.344Z"
-              transform="translate(-5.857 -2.625)"
-              fill-rule="evenodd"
-            />
-            <path
-              id="path453437"
-              d="M223.672,297.014a.672.672,0,0,0,0,1.344h1.344a.672.672,0,0,0,0-1.344Z"
-              transform="translate(-5.857 -1.312)"
-              fill-rule="evenodd"
-            />
-            <path
-              id="rect18334"
-              d="M222.7,293.014a4.7,4.7,0,1,0,4.7,4.7A4.714,4.714,0,0,0,222.7,293.014Zm0,1.344a3.359,3.359,0,1,1-3.359,3.359A3.349,3.349,0,0,1,222.7,294.357Z"
-              transform="translate(-4.217)"
-              fill-rule="evenodd"
-            />
-          </g>
-        </svg>
-      );
-
-    case "ui-backpack":
-      return (
-        <svg
-          className={["icon", `icon--${name}`, className]
-            .filter((className) => !isEmpty(className))
-            .join(" ")}
-          width={width}
-          height={height}
-          viewBox="0 0 14.499 16.11"
-        >
-          {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
-          {title && <title>{title}</title>}
-          <path
-            id="Path_2"
-            data-name="Path 2"
-            d="M22.444,28.805A.805.805,0,0,0,21.639,28H16.806a.806.806,0,0,0-.806.806v1.611h6.444ZM16,32.027h6.444v2.417H16Z"
-            transform="translate(-11.972 -18.334)"
-          />
-          <path
-            id="Path_3"
-            data-name="Path 3"
-            d="M20.5,12.055a4.837,4.837,0,0,0-4.028-4.761V6.417A2.419,2.419,0,0,0,14.055,4H12.444a2.419,2.419,0,0,0-2.417,2.417v.878A4.837,4.837,0,0,0,6,12.055V18.5A1.613,1.613,0,0,0,7.611,20.11h.806V14.472a2.419,2.419,0,0,1,2.417-2.417h4.833a2.419,2.419,0,0,1,2.417,2.417V20.11h.806A1.613,1.613,0,0,0,20.5,18.5ZM11.639,6.417a.806.806,0,0,1,.806-.806h1.611a.805.805,0,0,1,.805.806v.806H11.639Z"
-            transform="translate(-6 -4)"
-          />
-        </svg>
-      );
-
-    case "ui-suitcase":
-      return (
-        <svg
-          className={["icon", `icon--${name}`, className]
-            .filter((className) => !isEmpty(className))
-            .join(" ")}
-          width={width}
-          height={height}
-          viewBox="0 0 15.992 13.708"
-        >
-          {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
-          {title && <title>{title}</title>}
-          <path
-            id="Path_21"
-            data-name="Path 21"
-            d="M5.712,2.285h4.569V1.142H5.712Zm-3.141,0V13.708H2a1.924,1.924,0,0,1-1.41-.589A1.924,1.924,0,0,1,0,11.709V4.284a1.924,1.924,0,0,1,.589-1.41A1.924,1.924,0,0,1,2,2.285Zm10,0V13.708H3.427V2.285H4.569V.857A.826.826,0,0,1,4.819.25.826.826,0,0,1,5.426,0h5.14a.826.826,0,0,1,.607.25.826.826,0,0,1,.25.607V2.285Zm3.427,2v7.425a2.011,2.011,0,0,1-2,2h-.571V2.285h.571a1.924,1.924,0,0,1,1.41.589A1.924,1.924,0,0,1,15.992,4.284Z"
-            transform="translate(0 0)"
-          />
-        </svg>
-      );
-
-    case "ui-business-lounge":
-      return (
-        <svg
-          className={["icon", `icon--${name}`, className]
-            .filter((className) => !isEmpty(className))
-            .join(" ")}
-          width={width}
-          height={height}
-          viewBox="0 0 20 19.999"
-        >
-          {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
-          {title && <title>{title}</title>}
-          <g id="waiting-room-svgrepo-com" transform="translate(0 -0.008)">
-            <g
-              id="Group_46"
-              data-name="Group 46"
-              transform="translate(0 0.008)"
-            >
-              <g id="Group_45" data-name="Group 45" transform="translate(0)">
-                <path
-                  id="Path_33"
-                  data-name="Path 33"
-                  d="M65.683,110.007a1.667,1.667,0,1,0-1.667-1.667A1.666,1.666,0,0,0,65.683,110.007Z"
-                  transform="translate(-61.515 -102.507)"
-                />
-                <path
-                  id="Path_34"
-                  data-name="Path 34"
-                  d="M6.25,242.2H2.418L.824,235.025a.417.417,0,1,0-.814.181l1.657,7.455v2.454a.417.417,0,1,0,.833,0v-2.083H5v2.083a.417.417,0,1,0,.833,0v-2.083h.417a.417.417,0,0,0,0-.833Z"
-                  transform="translate(0 -225.532)"
-                />
-                <path
-                  id="Path_35"
-                  data-name="Path 35"
-                  d="M281.933.008a4.583,4.583,0,1,0,4.583,4.583A4.588,4.588,0,0,0,281.933.008Zm1.667,5h-1.667a.417.417,0,0,1-.417-.417v-2.5a.417.417,0,0,1,.833,0V4.175h1.25a.417.417,0,1,1,0,.833Z"
-                  transform="translate(-266.516 -0.008)"
-                />
-                <path
-                  id="Path_36"
-                  data-name="Path 36"
-                  d="M70.265,218.341H67.348v-3.333a1.667,1.667,0,0,0-3.333,0v4.583a1.251,1.251,0,0,0,1.25,1.25h3.75v2.917a1.25,1.25,0,1,0,2.5,0v-4.167A1.251,1.251,0,0,0,70.265,218.341Z"
-                  transform="translate(-61.514 -205.008)"
-                />
-              </g>
-            </g>
-          </g>
-        </svg>
-      );
-
-    case "ui-shopping-bag":
-      return (
-        <svg
-          className={["icon", `icon--${name}`, className]
-            .filter((className) => !isEmpty(className))
-            .join(" ")}
-          width={width}
-          height={height}
-          viewBox="0 0 13.299 14.65"
-        >
-          {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
-          {title && <title>{title}</title>}
-          <path
-            id="Path_22"
-            data-name="Path 22"
-            d="M9.135.6A3.523,3.523,0,0,0,5.612,4.123V5.691A2.455,2.455,0,0,0,5,5.869,2.967,2.967,0,0,0,3.842,6.8,6.951,6.951,0,0,0,3,9.393c-.452,2.056-.678,3.083-.392,3.885A2.967,2.967,0,0,0,3.835,14.8c.721.451,1.774.451,3.878.451h2.843c2.1,0,3.157,0,3.878-.451a2.967,2.967,0,0,0,1.223-1.521c.285-.8.059-1.829-.392-3.885a6.951,6.951,0,0,0-.837-2.59,2.967,2.967,0,0,0-1.162-.934,2.456,2.456,0,0,0-.608-.178V4.123A3.523,3.523,0,0,0,9.135.6Zm2.411,5.012V4.123a2.411,2.411,0,0,0-4.821,0V5.612c.287,0,.613,0,.989,0h2.843C10.933,5.607,11.259,5.607,11.546,5.612ZM6.168,8.574a.742.742,0,1,0-.742-.742A.742.742,0,0,0,6.168,8.574Zm6.676-.742A.742.742,0,1,1,12.1,7.09.742.742,0,0,1,12.844,7.832Z"
-            transform="translate(-2.486 -0.6)"
-            fill-rule="evenodd"
-          />
-        </svg>
-      );
-
-    case "ui-priority":
-      return (
-        <svg
-          className={["icon", `icon--${name}`, className]
-            .filter((className) => !isEmpty(className))
-            .join(" ")}
-          width={width}
-          height={height}
-          viewBox="0 0 20 17.533"
-        >
-          {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
-          {title && <title>{title}</title>}
-          <g id="list-high-priority" transform="translate(-1.5 -2.552)">
-            <path
-              id="Path_24"
-              data-name="Path 24"
-              d="M24,39H34v1.333H24Z"
-              transform="translate(-12.5 -20.249)"
-            />
-            <path
-              id="Path_25"
-              data-name="Path 25"
-              d="M24,29H34v1.333H24Z"
-              transform="translate(-12.5 -14.694)"
-            />
-            <path
-              id="Path_26"
-              data-name="Path 26"
-              d="M24,19H34v1.333H24Z"
-              transform="translate(-12.5 -9.138)"
-            />
-            <path
-              id="Path_27"
-              data-name="Path 27"
-              d="M30.75,9h7v1.333h-7Z"
-              transform="translate(-16.25 -3.583)"
-            />
-            <path
-              id="Path_28"
-              data-name="Path 28"
-              d="M13.417,6.043,7.8,2.551V5.418H7.551a5.544,5.544,0,0,0-4.326,2.2A8.164,8.164,0,0,0,1.5,12.751a8.164,8.164,0,0,0,1.725,5.133,5.544,5.544,0,0,0,4.326,2.2H9.833V18.751H7.551c-2.6,0-4.718-2.692-4.718-6s2.117-6,4.718-6H7.8V9.635ZM9.133,4.95l1.783,1.109L9.133,7.2Z"
-            />
-          </g>
-        </svg>
-      );
-
-    case "ui-tooltip":
-      return (
-        <svg
-          className={["icon", `icon--${name}`, className]
-            .filter((className) => !isEmpty(className))
-            .join(" ")}
-          width={width}
-          height={height}
-          viewBox="0 0 512 512"
-        >
-          <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
-          {title && <title>{title}</title>}
-          <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
-        </svg>
-      );
-
-    case "ui-qsm-location":
-      return (
-        <svg
-          className={["icon", `icon--${name}`, className]
-            .filter((className) => !isEmpty(className))
-            .join(" ")}
-          width={width}
-          height={height}
-          viewBox="0 0 384 512"
-        >
-          <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
-          {title && <title>{title}</title>}
-          <path d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" />
-        </svg>
-      );
-
-    case "ui-plane-depart":
-      return (
-        <svg
-          className={["icon", `icon--${name}`, className]
-            .filter((className) => !isEmpty(className))
-            .join(" ")}
-          width={width}
-          height={height}
-          viewBox="0 0 640 512"
-        >
-          <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
-          {title && <title>{title}</title>}
-          <path d="M381 114.9L186.1 41.8c-16.7-6.2-35.2-5.3-51.1 2.7L89.1 67.4C78 73 77.2 88.5 87.6 95.2l146.9 94.5L136 240 77.8 214.1c-8.7-3.9-18.8-3.7-27.3 .6L18.3 230.8c-9.3 4.7-11.8 16.8-5 24.7l73.1 85.3c6.1 7.1 15 11.2 24.3 11.2l137.7 0c5 0 9.9-1.2 14.3-3.4L535.6 212.2c46.5-23.3 82.5-63.3 100.8-112C645.9 75 627.2 48 600.2 48l-57.4 0c-20.2 0-40.2 4.8-58.2 14L381 114.9zM0 480c0 17.7 14.3 32 32 32l576 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 448c-17.7 0-32 14.3-32 32z" />
-        </svg>
-      );
-
-    case "ui-plane-arrive":
-      return (
-        <svg
-          className={["icon", `icon--${name}`, className]
-            .filter((className) => !isEmpty(className))
-            .join(" ")}
-          width={width}
-          height={height}
-          viewBox="0 0 640 512"
-        >
-          <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
-          {title && <title>{title}</title>}
-          <path d="M.3 166.9L0 68C0 57.7 9.5 50.1 19.5 52.3l35.6 7.9c10.6 2.3 19.2 9.9 23 20L96 128l127.3 37.6L181.8 20.4C178.9 10.2 186.6 0 197.2 0l40.1 0c11.6 0 22.2 6.2 27.9 16.3l109 193.8 107.2 31.7c15.9 4.7 30.8 12.5 43.7 22.8l34.4 27.6c24 19.2 18.1 57.3-10.7 68.2c-41.2 15.6-86.2 18.1-128.8 7L121.7 289.8c-11.1-2.9-21.2-8.7-29.3-16.9L9.5 189.4c-5.9-6-9.3-14.1-9.3-22.5zM32 448l576 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 512c-17.7 0-32-14.3-32-32s14.3-32 32-32zm96-80a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm128-16a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
-        </svg>
-      );
-
-    case "ui-clock":
-      return (
-        <svg
-          className={["icon", `icon--${name}`, className]
-            .filter((className) => !isEmpty(className))
-            .join(" ")}
-          width={width}
-          height={height}
-          viewBox="0 0 19 19"
-        >
-          {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
-          {title && <title>{title}</title>}
-          <g
-            id="Group_56"
-            data-name="Group 56"
-            transform="translate(-390 -665)"
-          >
-            <circle
-              id="Ellipse_5"
-              data-name="Ellipse 5"
-              cx="9.5"
-              cy="9.5"
-              r="9.5"
-              transform="translate(390 665)"
-              fill="#fff"
-            />
-            <g id="time" transform="translate(391.211 666.211)">
-              <path
-                id="Path_11"
-                data-name="Path 11"
-                d="M8.289,13.578a5.289,5.289,0,1,1,5.289-5.289A5.289,5.289,0,0,1,8.289,13.578Zm0-9.823a4.534,4.534,0,1,0,4.534,4.534A4.534,4.534,0,0,0,8.289,3.756Z"
-                transform="translate(0 0)"
-              />
-              <path
-                id="Path_12"
-                data-name="Path 12"
-                d="M24.612,16.167,22.5,14.055V10.5h.756v3.241l1.889,1.893Z"
-                transform="translate(-14.589 -5.611)"
-              />
-            </g>
-          </g>
-        </svg>
-      );
-
-    default:
-      return null;
-  }
-};
-
-export default Icon;
+import { isEmpty } from "lodash";
+import React, { useContext } from "react";
+import SettingsContext from "../settings-context";
+import HTMLComment from "react-html-comment";
+
+interface IconProps {
+  name: string;
+  className?: string;
+  title?: string;
+  width?: number;
+  height?: number;
+}
+
+const Icon: React.FC<IconProps> = ({
+  name,
+  className,
+  title,
+  width,
+  height,
+}) => {
+  const { icons } = useContext(SettingsContext);
+
+  if (icons) {
+    return (
+      <svg
+        className={["icon", `icon--${name}`, className]
+          .filter((className) => !isEmpty(className))
+          .join(" ")}
+        width={width}
+        height={height}
+      >
+        {title && <title>{title}</title>}
+        <use href={`${icons}#${name}`}></use>
+      </svg>
+    );
+  }
+
+  switch (name) {
+    case "ui-chevron":
+      return (
+        <svg
+          className={["icon", `icon--${name}`, className]
+            .filter((className) => !isEmpty(className))
+            .join(" ")}
+          width={width}
+          height={height}
+          viewBox="0 0 320 512"
+        >
+          <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
+          {title && <title>{title}</title>}
+          <path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
+        </svg>
+      );
+
+    case "ui-error":
+      return (
+        <svg
+          className={["icon", `icon--${name}`, className]
+            .filter((className) => !isEmpty(className))
+            .join(" ")}
+          width={width}
+          height={height}
+          viewBox="0 0 512 512"
+        >
+          <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
+          {title && <title>{title}</title>}
+          <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" />
+        </svg>
+      );
+
+    case "ui-tel":
+      return (
+        <svg
+          className={["icon", `icon--${name}`, className]
+            .filter((className) => !isEmpty(className))
+            .join(" ")}
+          width={width}
+          height={height}
+          viewBox="0 0 512 512"
+        >
+          <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
+          {title && <title>{title}</title>}
+          <path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z" />
+        </svg>
+      );
+
+    case "ui-mail":
+      return (
+        <svg
+          className={["icon", `icon--${name}`, className]
+            .filter((className) => !isEmpty(className))
+            .join(" ")}
+          width={width}
+          height={height}
+          viewBox="0 0 512 512"
+        >
+          <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
+          {title && <title>{title}</title>}
+          <path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z" />
+        </svg>
+      );
+
+    case "ui-trashcan":
+      return (
+        <svg
+          className={["icon", `icon--${name}`, className]
+            .filter((className) => !isEmpty(className))
+            .join(" ")}
+          width={width}
+          height={height}
+          viewBox="0 0 448 512"
+        >
+          <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
+          {title && <title>{title}</title>}
+          <path d="M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z" />
+        </svg>
+      );
+
+    case "ui-home":
+
+    case "ui-filter":
+      return (
+        <svg
+          className={["icon", `icon--${name}`, className]
+            .filter((className) => !isEmpty(className))
+            .join(" ")}
+          width={width}
+          height={height}
+          viewBox="0 0 10.701 9.698"
+        >
+          {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
+          {title && <title>{title}</title>}
+          <g id="filter-solid" transform="translate(-2.667 -5.333)">
+            <path
+              id="Path_54"
+              data-name="Path 54"
+              d="M9.355,15.031V10.517l3.836-3.846a.605.605,0,0,0,.177-.435V5.668a.334.334,0,0,0-.334-.334H3a.334.334,0,0,0-.334.334v.558a.6.6,0,0,0,.177.425L6.68,10.544v3.411Z"
+              transform="translate(0 0)"
+              fill="#12aad8"
+            />
+            <path
+              id="Path_55"
+              data-name="Path 55"
+              d="M13.194,5.333H2.827a.174.174,0,0,0-.161.174v.575A.445.445,0,0,0,2.8,6.4L6.81,10.413v3.344l2.425,1.207V10.406l4.013-4.013a.451.451,0,0,0,.12-.3V5.507a.174.174,0,0,0-.174-.174Z"
+            />
+          </g>
+        </svg>
+      );
+
+    case "ui-close":
+      return (
+        <svg
+          className={["icon", `icon--${name}`, className]
+            .filter((className) => !isEmpty(className))
+            .join(" ")}
+          width={width}
+          height={height}
+          viewBox="0 0 384 512"
+        >
+          <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
+          {title && <title>{title}</title>}
+          <path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
+        </svg>
+      );
+
+    case "ui-ticket":
+      return (
+        <svg
+          className={["icon", `icon--${name}`, className]
+            .filter((className) => !isEmpty(className))
+            .join(" ")}
+          width={width}
+          height={height}
+          viewBox="0 0 20 20"
+        >
+          {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
+          {title && <title>{title}</title>}
+          <g id="ticket" transform="translate(0.439 1.629)">
+            <path
+              id="Path_14"
+              data-name="Path 14"
+              d="M12.125,5.335l3.751,3.751L9.086,15.875,5.335,12.125Zm-2.5,11.62L16.955,9.62a.745.745,0,0,0,0-1.068l-4.3-4.3a.774.774,0,0,0-1.068,0L4.255,11.59a.745.745,0,0,0,0,1.068l4.3,4.3a.774.774,0,0,0,1.068,0ZM20.172,9.395,9.406,20.172a1.533,1.533,0,0,1-2.148,0l-1.5-1.5a2.293,2.293,0,0,0,0-3.228,2.2,2.2,0,0,0-1.614-.665,2.2,2.2,0,0,0-1.614.665l-1.484-1.5a1.533,1.533,0,0,1,0-2.148L11.816,1.05a1.533,1.533,0,0,1,2.148,0l1.484,1.484a2.2,2.2,0,0,0-.665,1.614,2.2,2.2,0,0,0,.665,1.614,2.293,2.293,0,0,0,3.228,0l1.5,1.484a1.533,1.533,0,0,1,0,2.148Z"
+              transform="translate(-1.05 -2.24)"
+            />
+          </g>
+        </svg>
+      );
+
+    case "ui-payback":
+      return (
+        <svg
+          className={["icon", `icon--${name}`, className]
+            .filter((className) => !isEmpty(className))
+            .join(" ")}
+          width={width}
+          height={height}
+          viewBox="0 0 20 20.154"
+        >
+          {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
+          {title && <title>{title}</title>}
+          <g id="layer1" transform="translate(-205.148 -293.014)">
+            <path
+              id="path453469"
+              d="M223.472,306.895a1.674,1.674,0,0,0-1.188.487l-1.971,1.972a1.67,1.67,0,0,0-.978-.726l-4.652-1.247a2.766,2.766,0,0,0-2.182.331l-2.9,1.832-.235-.408a1.089,1.089,0,0,0-1.471-.394l-2.209,1.274a1.089,1.089,0,0,0-.394,1.471l3.291,5.7a1.088,1.088,0,0,0,1.47.4l2.209-1.276a1.09,1.09,0,0,0,.395-1.471l-.043-.076,1.258-.85,4.63.911a1.742,1.742,0,0,0,1.653-.514c1.493-1.527,2.988-3.048,4.505-4.544l0,0a1.675,1.675,0,0,0-1.189-2.863Zm0,1.332a.336.336,0,0,1,.238.1.323.323,0,0,1,0,.476c-1.525,1.5-3.024,3.031-4.518,4.559a1.847,1.847,0,0,1-.433.134l-4.9-.963a.672.672,0,0,0-.507.1l-1.411.954-1.667-2.886,2.947-1.858a1.411,1.411,0,0,1,1.118-.171l4.652,1.247a.336.336,0,1,1-.175.65l-2.92-.782a.672.672,0,0,0-.348,1.3l2.92.782a1.693,1.693,0,0,0,1.741-.572.672.672,0,0,0,.177-.118l2.85-2.852A.336.336,0,0,1,223.472,308.226Zm-15.14,1.812.325.564a.615.615,0,0,0,.253.438l2.445,4.235-1.745,1.008-3.024-5.237Z"
+              transform="translate(0 -4.554)"
+              fill-rule="evenodd"
+            />
+            <path
+              id="path453459"
+              d="M223.672,301.014a.672.672,0,1,0,0,1.344h1.344a.672.672,0,1,0,0-1.344Z"
+              transform="translate(-5.857 -2.625)"
+              fill-rule="evenodd"
+            />
+            <path
+              id="path453437"
+              d="M223.672,297.014a.672.672,0,0,0,0,1.344h1.344a.672.672,0,0,0,0-1.344Z"
+              transform="translate(-5.857 -1.312)"
+              fill-rule="evenodd"
+            />
+            <path
+              id="rect18334"
+              d="M222.7,293.014a4.7,4.7,0,1,0,4.7,4.7A4.714,4.714,0,0,0,222.7,293.014Zm0,1.344a3.359,3.359,0,1,1-3.359,3.359A3.349,3.349,0,0,1,222.7,294.357Z"
+              transform="translate(-4.217)"
+              fill-rule="evenodd"
+            />
+          </g>
+        </svg>
+      );
+
+    case "ui-backpack":
+      return (
+        <svg
+          className={["icon", `icon--${name}`, className]
+            .filter((className) => !isEmpty(className))
+            .join(" ")}
+          width={width}
+          height={height}
+          viewBox="0 0 14.499 16.11"
+        >
+          {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
+          {title && <title>{title}</title>}
+          <path
+            id="Path_2"
+            data-name="Path 2"
+            d="M22.444,28.805A.805.805,0,0,0,21.639,28H16.806a.806.806,0,0,0-.806.806v1.611h6.444ZM16,32.027h6.444v2.417H16Z"
+            transform="translate(-11.972 -18.334)"
+          />
+          <path
+            id="Path_3"
+            data-name="Path 3"
+            d="M20.5,12.055a4.837,4.837,0,0,0-4.028-4.761V6.417A2.419,2.419,0,0,0,14.055,4H12.444a2.419,2.419,0,0,0-2.417,2.417v.878A4.837,4.837,0,0,0,6,12.055V18.5A1.613,1.613,0,0,0,7.611,20.11h.806V14.472a2.419,2.419,0,0,1,2.417-2.417h4.833a2.419,2.419,0,0,1,2.417,2.417V20.11h.806A1.613,1.613,0,0,0,20.5,18.5ZM11.639,6.417a.806.806,0,0,1,.806-.806h1.611a.805.805,0,0,1,.805.806v.806H11.639Z"
+            transform="translate(-6 -4)"
+          />
+        </svg>
+      );
+
+    case "ui-suitcase":
+      return (
+        <svg
+          className={["icon", `icon--${name}`, className]
+            .filter((className) => !isEmpty(className))
+            .join(" ")}
+          width={width}
+          height={height}
+          viewBox="0 0 15.992 13.708"
+        >
+          {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
+          {title && <title>{title}</title>}
+          <path
+            id="Path_21"
+            data-name="Path 21"
+            d="M5.712,2.285h4.569V1.142H5.712Zm-3.141,0V13.708H2a1.924,1.924,0,0,1-1.41-.589A1.924,1.924,0,0,1,0,11.709V4.284a1.924,1.924,0,0,1,.589-1.41A1.924,1.924,0,0,1,2,2.285Zm10,0V13.708H3.427V2.285H4.569V.857A.826.826,0,0,1,4.819.25.826.826,0,0,1,5.426,0h5.14a.826.826,0,0,1,.607.25.826.826,0,0,1,.25.607V2.285Zm3.427,2v7.425a2.011,2.011,0,0,1-2,2h-.571V2.285h.571a1.924,1.924,0,0,1,1.41.589A1.924,1.924,0,0,1,15.992,4.284Z"
+            transform="translate(0 0)"
+          />
+        </svg>
+      );
+
+    case "ui-business-lounge":
+      return (
+        <svg
+          className={["icon", `icon--${name}`, className]
+            .filter((className) => !isEmpty(className))
+            .join(" ")}
+          width={width}
+          height={height}
+          viewBox="0 0 20 19.999"
+        >
+          {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
+          {title && <title>{title}</title>}
+          <g id="waiting-room-svgrepo-com" transform="translate(0 -0.008)">
+            <g
+              id="Group_46"
+              data-name="Group 46"
+              transform="translate(0 0.008)"
+            >
+              <g id="Group_45" data-name="Group 45" transform="translate(0)">
+                <path
+                  id="Path_33"
+                  data-name="Path 33"
+                  d="M65.683,110.007a1.667,1.667,0,1,0-1.667-1.667A1.666,1.666,0,0,0,65.683,110.007Z"
+                  transform="translate(-61.515 -102.507)"
+                />
+                <path
+                  id="Path_34"
+                  data-name="Path 34"
+                  d="M6.25,242.2H2.418L.824,235.025a.417.417,0,1,0-.814.181l1.657,7.455v2.454a.417.417,0,1,0,.833,0v-2.083H5v2.083a.417.417,0,1,0,.833,0v-2.083h.417a.417.417,0,0,0,0-.833Z"
+                  transform="translate(0 -225.532)"
+                />
+                <path
+                  id="Path_35"
+                  data-name="Path 35"
+                  d="M281.933.008a4.583,4.583,0,1,0,4.583,4.583A4.588,4.588,0,0,0,281.933.008Zm1.667,5h-1.667a.417.417,0,0,1-.417-.417v-2.5a.417.417,0,0,1,.833,0V4.175h1.25a.417.417,0,1,1,0,.833Z"
+                  transform="translate(-266.516 -0.008)"
+                />
+                <path
+                  id="Path_36"
+                  data-name="Path 36"
+                  d="M70.265,218.341H67.348v-3.333a1.667,1.667,0,0,0-3.333,0v4.583a1.251,1.251,0,0,0,1.25,1.25h3.75v2.917a1.25,1.25,0,1,0,2.5,0v-4.167A1.251,1.251,0,0,0,70.265,218.341Z"
+                  transform="translate(-61.514 -205.008)"
+                />
+              </g>
+            </g>
+          </g>
+        </svg>
+      );
+
+    case "ui-shopping-bag":
+      return (
+        <svg
+          className={["icon", `icon--${name}`, className]
+            .filter((className) => !isEmpty(className))
+            .join(" ")}
+          width={width}
+          height={height}
+          viewBox="0 0 13.299 14.65"
+        >
+          {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
+          {title && <title>{title}</title>}
+          <path
+            id="Path_22"
+            data-name="Path 22"
+            d="M9.135.6A3.523,3.523,0,0,0,5.612,4.123V5.691A2.455,2.455,0,0,0,5,5.869,2.967,2.967,0,0,0,3.842,6.8,6.951,6.951,0,0,0,3,9.393c-.452,2.056-.678,3.083-.392,3.885A2.967,2.967,0,0,0,3.835,14.8c.721.451,1.774.451,3.878.451h2.843c2.1,0,3.157,0,3.878-.451a2.967,2.967,0,0,0,1.223-1.521c.285-.8.059-1.829-.392-3.885a6.951,6.951,0,0,0-.837-2.59,2.967,2.967,0,0,0-1.162-.934,2.456,2.456,0,0,0-.608-.178V4.123A3.523,3.523,0,0,0,9.135.6Zm2.411,5.012V4.123a2.411,2.411,0,0,0-4.821,0V5.612c.287,0,.613,0,.989,0h2.843C10.933,5.607,11.259,5.607,11.546,5.612ZM6.168,8.574a.742.742,0,1,0-.742-.742A.742.742,0,0,0,6.168,8.574Zm6.676-.742A.742.742,0,1,1,12.1,7.09.742.742,0,0,1,12.844,7.832Z"
+            transform="translate(-2.486 -0.6)"
+            fill-rule="evenodd"
+          />
+        </svg>
+      );
+
+    case "ui-priority":
+      return (
+        <svg
+          className={["icon", `icon--${name}`, className]
+            .filter((className) => !isEmpty(className))
+            .join(" ")}
+          width={width}
+          height={height}
+          viewBox="0 0 20 17.533"
+        >
+          {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
+          {title && <title>{title}</title>}
+          <g id="list-high-priority" transform="translate(-1.5 -2.552)">
+            <path
+              id="Path_24"
+              data-name="Path 24"
+              d="M24,39H34v1.333H24Z"
+              transform="translate(-12.5 -20.249)"
+            />
+            <path
+              id="Path_25"
+              data-name="Path 25"
+              d="M24,29H34v1.333H24Z"
+              transform="translate(-12.5 -14.694)"
+            />
+            <path
+              id="Path_26"
+              data-name="Path 26"
+              d="M24,19H34v1.333H24Z"
+              transform="translate(-12.5 -9.138)"
+            />
+            <path
+              id="Path_27"
+              data-name="Path 27"
+              d="M30.75,9h7v1.333h-7Z"
+              transform="translate(-16.25 -3.583)"
+            />
+            <path
+              id="Path_28"
+              data-name="Path 28"
+              d="M13.417,6.043,7.8,2.551V5.418H7.551a5.544,5.544,0,0,0-4.326,2.2A8.164,8.164,0,0,0,1.5,12.751a8.164,8.164,0,0,0,1.725,5.133,5.544,5.544,0,0,0,4.326,2.2H9.833V18.751H7.551c-2.6,0-4.718-2.692-4.718-6s2.117-6,4.718-6H7.8V9.635ZM9.133,4.95l1.783,1.109L9.133,7.2Z"
+            />
+          </g>
+        </svg>
+      );
+
+    case "ui-tooltip":
+      return (
+        <svg
+          className={["icon", `icon--${name}`, className]
+            .filter((className) => !isEmpty(className))
+            .join(" ")}
+          width={width}
+          height={height}
+          viewBox="0 0 512 512"
+        >
+          <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
+          {title && <title>{title}</title>}
+          <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
+        </svg>
+      );
+
+    case "ui-qsm-location":
+      return (
+        <svg
+          className={["icon", `icon--${name}`, className]
+            .filter((className) => !isEmpty(className))
+            .join(" ")}
+          width={width}
+          height={height}
+          viewBox="0 0 384 512"
+        >
+          <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
+          {title && <title>{title}</title>}
+          <path d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" />
+        </svg>
+      );
+
+    case "ui-plane-depart":
+      return (
+        <svg
+          className={["icon", `icon--${name}`, className]
+            .filter((className) => !isEmpty(className))
+            .join(" ")}
+          width={width}
+          height={height}
+          viewBox="0 0 640 512"
+        >
+          <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
+          {title && <title>{title}</title>}
+          <path d="M381 114.9L186.1 41.8c-16.7-6.2-35.2-5.3-51.1 2.7L89.1 67.4C78 73 77.2 88.5 87.6 95.2l146.9 94.5L136 240 77.8 214.1c-8.7-3.9-18.8-3.7-27.3 .6L18.3 230.8c-9.3 4.7-11.8 16.8-5 24.7l73.1 85.3c6.1 7.1 15 11.2 24.3 11.2l137.7 0c5 0 9.9-1.2 14.3-3.4L535.6 212.2c46.5-23.3 82.5-63.3 100.8-112C645.9 75 627.2 48 600.2 48l-57.4 0c-20.2 0-40.2 4.8-58.2 14L381 114.9zM0 480c0 17.7 14.3 32 32 32l576 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 448c-17.7 0-32 14.3-32 32z" />
+        </svg>
+      );
+
+    case "ui-plane-arrive":
+      return (
+        <svg
+          className={["icon", `icon--${name}`, className]
+            .filter((className) => !isEmpty(className))
+            .join(" ")}
+          width={width}
+          height={height}
+          viewBox="0 0 640 512"
+        >
+          <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
+          {title && <title>{title}</title>}
+          <path d="M.3 166.9L0 68C0 57.7 9.5 50.1 19.5 52.3l35.6 7.9c10.6 2.3 19.2 9.9 23 20L96 128l127.3 37.6L181.8 20.4C178.9 10.2 186.6 0 197.2 0l40.1 0c11.6 0 22.2 6.2 27.9 16.3l109 193.8 107.2 31.7c15.9 4.7 30.8 12.5 43.7 22.8l34.4 27.6c24 19.2 18.1 57.3-10.7 68.2c-41.2 15.6-86.2 18.1-128.8 7L121.7 289.8c-11.1-2.9-21.2-8.7-29.3-16.9L9.5 189.4c-5.9-6-9.3-14.1-9.3-22.5zM32 448l576 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 512c-17.7 0-32-14.3-32-32s14.3-32 32-32zm96-80a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm128-16a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
+        </svg>
+      );
+
+    case "ui-clock":
+      return (
+        <svg
+          className={["icon", `icon--${name}`, className]
+            .filter((className) => !isEmpty(className))
+            .join(" ")}
+          width={width}
+          height={height}
+          viewBox="0 0 19 19"
+        >
+          {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
+          {title && <title>{title}</title>}
+          <g
+            id="Group_56"
+            data-name="Group 56"
+            transform="translate(-390 -665)"
+          >
+            <circle
+              id="Ellipse_5"
+              data-name="Ellipse 5"
+              cx="9.5"
+              cy="9.5"
+              r="9.5"
+              transform="translate(390 665)"
+              fill="#fff"
+            />
+            <g id="time" transform="translate(391.211 666.211)">
+              <path
+                id="Path_11"
+                data-name="Path 11"
+                d="M8.289,13.578a5.289,5.289,0,1,1,5.289-5.289A5.289,5.289,0,0,1,8.289,13.578Zm0-9.823a4.534,4.534,0,1,0,4.534,4.534A4.534,4.534,0,0,0,8.289,3.756Z"
+                transform="translate(0 0)"
+              />
+              <path
+                id="Path_12"
+                data-name="Path 12"
+                d="M24.612,16.167,22.5,14.055V10.5h.756v3.241l1.889,1.893Z"
+                transform="translate(-14.589 -5.611)"
+              />
+            </g>
+          </g>
+        </svg>
+      );
+
+    default:
+      return null;
+  }
+};
+
+export default Icon;