import { isEmpty } from 'lodash';
import React from 'react';
// import SettingsContext from '../settings-context'; // TODO: SETTINGS LOGIC FOR QSM
import HTMLComment from 'react-html-comment';

interface IconProps {
  name: string;
  className?: string;
  title?: string;
  width?: number;
  height?: number;
  fill?: string;
}

const Icon: React.FC<IconProps> = ({ name, className, title, width, height, fill }) => {
  const { icons } = { icons: '' }; // useContext(SettingsContext);

  if (icons) {
    return (
      <svg
        className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
        width={width}
        height={height}
        fill={fill ?? 'currentColor'}>
        {title && <title>{title}</title>}
        <use href={`${icons}#${name}`}></use>
      </svg>
    );
  }

  switch (name) {
    case 'ui-close':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 384 512"
          fill={fill ?? 'currentColor'}>
          <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"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-plus':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 448 512"
          fill={fill ?? 'currentColor'}>
          <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 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z" />
        </svg>
      );

    case 'ui-min':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 448 512"
          fill={fill ?? 'currentColor'}>
          <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="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z" />
        </svg>
      );

    case 'ui-chevron':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 320 512"
          fill={fill ?? 'currentColor'}>
          <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-info':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 512 512"
          fill={fill ?? 'currentColor'}>
          <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 0-512 256 256 0 1 0 0 512zM224 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm-8 64l48 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-24l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-calendar':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 448 512"
          fill={fill ?? 'currentColor'}>
          <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="M96 32l0 32L48 64C21.5 64 0 85.5 0 112l0 48 448 0 0-48c0-26.5-21.5-48-48-48l-48 0 0-32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 32L160 64l0-32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192L0 192 0 464c0 26.5 21.5 48 48 48l352 0c26.5 0 48-21.5 48-48l0-272z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-bed':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 640 512"
          fill={fill ?? 'currentColor'}>
          <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="M32 32c17.7 0 32 14.3 32 32l0 256 224 0 0-160c0-17.7 14.3-32 32-32l224 0c53 0 96 43 96 96l0 224c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-32-224 0-32 0L64 416l0 32c0 17.7-14.3 32-32 32s-32-14.3-32-32L0 64C0 46.3 14.3 32 32 32zm144 96a80 80 0 1 1 0 160 80 80 0 1 1 0-160z"
            fill={fill ?? 'currentColor'}
          />
        </svg>
      );

    case 'ui-utensils':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 416 512"
          fill={fill ?? 'currentColor'}>
          <HTMLComment text="!Font Awesome Free v5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc." />
          {title && <title>{title}</title>}
          <path d="M207.9 15.2c.8 4.7 16.1 94.5 16.1 128.8 0 52.3-27.8 89.6-68.9 104.6L168 486.7c.7 13.7-10.2 25.3-24 25.3H80c-13.7 0-24.7-11.5-24-25.3l12.9-238.1C27.7 233.6 0 196.2 0 144 0 109.6 15.3 19.9 16.1 15.2 19.3-5.1 61.4-5.4 64 16.3v141.2c1.3 3.4 15.1 3.2 16 0 1.4-25.3 7.9-139.2 8-141.8 3.3-20.8 44.7-20.8 47.9 0 .2 2.7 6.6 116.5 8 141.8.9 3.2 14.8 3.4 16 0V16.3c2.6-21.6 44.8-21.4 48-1.1zm119.2 285.7l-15 185.1c-1.2 14 9.9 26 23.9 26h56c13.3 0 24-10.7 24-24V24c0-13.2-10.7-24-24-24-82.5 0-221.4 178.5-64.9 300.9z" />
        </svg>
      );

    case 'ui-flight':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 576 512"
          fill={fill ?? 'currentColor'}>
          <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="M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z" />
        </svg>
      );

    case 'ui-transfer':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 512 512"
          fill={fill ?? 'currentColor'}>
          <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="M192 0c-17.7 0-32 14.3-32 32l0 32 0 .2c-38.6 2.2-72.3 27.3-85.2 64.1L39.6 228.8C16.4 238.4 0 261.3 0 288L0 432l0 48c0 17.7 14.3 32 32 32l32 0c17.7 0 32-14.3 32-32l0-48 320 0 0 48c0 17.7 14.3 32 32 32l32 0c17.7 0 32-14.3 32-32l0-48 0-144c0-26.7-16.4-49.6-39.6-59.2L437.2 128.3c-12.9-36.8-46.6-62-85.2-64.1l0-.2 0-32c0-17.7-14.3-32-32-32L192 0zM165.4 128l181.2 0c13.6 0 25.7 8.6 30.2 21.4L402.9 224l-293.8 0 26.1-74.6c4.5-12.8 16.6-21.4 30.2-21.4zM96 288a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm288 32a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-star':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 576 512"
          fill={fill ?? 'currentColor'}>
          <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="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
        </svg>
      );

    case 'ui-halfstar':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 576 512"
          fill={fill ?? 'currentColor'}>
          <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="M288 0c-12.2 .1-23.3 7-28.6 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3L288 439.8 288 0zM429.9 512c1.1 .1 2.1 .1 3.2 0l-3.2 0z" />
        </svg>
      );

    case 'ui-user':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 448 512"
          fill={fill ?? 'currentColor'}>
          <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="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z" />
        </svg>
      );

    case 'ui-pencil':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 512 512"
          fill={fill ?? 'currentColor'}>
          <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="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z" />
        </svg>
      );

    case 'ui-check':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 448 512"
          fill={fill ?? 'currentColor'}>
          <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="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" />
        </svg>
      );

    case 'ui-hotel':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 640 640"
          fill={fill ?? 'currentColor'}>
          <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="M16 24C16 10.7 26.7 0 40 0L472 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 416 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L40 512c-13.3 0-24-10.7-24-24s10.7-24 24-24l8 0 0-416-8 0C26.7 48 16 37.3 16 24zm208 88l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zM128 96c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zm96 112l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zM352 96c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zM112 208l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm240-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zM288 384l43.8 0c9.9 0 17.5-9 14-18.2-13.8-36.1-48.8-61.8-89.7-61.8s-75.9 25.7-89.7 61.8c-3.5 9.2 4.1 18.2 14 18.2l43.8 0 0 80 64 0 0-80z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-location':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 384 512"
          fill={fill ?? 'currentColor'}>
          <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="M0 188.6C0 84.4 86 0 192 0S384 84.4 384 188.6c0 119.3-120.2 262.3-170.4 316.8-11.8 12.8-31.5 12.8-43.3 0-50.2-54.5-170.4-197.5-170.4-316.8zM192 256a64 64 0 1 0 0-128 64 64 0 1 0 0 128z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-suitcase':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 512 512"
          fill={fill ?? 'currentColor'}>
          <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="M200 48l112 0c4.4 0 8 3.6 8 8l0 40-128 0 0-40c0-4.4 3.6-8 8-8zm-56 8l0 424 224 0 0-424c0-30.9-25.1-56-56-56L200 0c-30.9 0-56 25.1-56 56zM416 96l0 384 32 0c35.3 0 64-28.7 64-64l0-256c0-35.3-28.7-64-64-64l-32 0zM96 480l0-384-32 0C28.7 96 0 124.7 0 160L0 416c0 35.3 28.7 64 64 64l32 0z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-ticket':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 576 512"
          fill={fill ?? 'currentColor'}>
          <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="M64 64C28.7 64 0 92.7 0 128l0 64C0 200.8 7.4 207.7 15.7 210.6 34.5 217.1 48 235 48 256s-13.5 38.9-32.3 45.4C7.4 304.3 0 311.2 0 320l0 64c0 35.3 28.7 64 64 64l448 0c35.3 0 64-28.7 64-64l0-64c0-8.8-7.4-15.7-15.7-18.6-18.8-6.5-32.3-24.4-32.3-45.4s13.5-38.9 32.3-45.4c8.3-2.9 15.7-9.8 15.7-18.6l0-64c0-35.3-28.7-64-64-64L64 64zM416 336l0-160-256 0 0 160 256 0zM112 160c0-17.7 14.3-32 32-32l288 0c17.7 0 32 14.3 32 32l0 192c0 17.7-14.3 32-32 32l-288 0c-17.7 0-32-14.3-32-32l0-192z" />
        </svg>
      );

    case 'ui-backforward':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 512 512"
          fill={fill ?? 'currentColor'}>
          <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="M502.6 150.6l-96 96c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L402.7 160 32 160c-17.7 0-32-14.3-32-32S14.3 96 32 96l370.7 0-41.4-41.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l96 96c12.5 12.5 12.5 32.8 0 45.3zm-397.3 352l-96-96c-12.5-12.5-12.5-32.8 0-45.3l96-96c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L109.3 352 480 352c17.7 0 32 14.3 32 32s-14.3 32-32 32l-370.7 0 41.4 41.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-car':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 512 512"
          fill={fill ?? 'currentColor'}>
          <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 117.4l-26.1 74.6 293.8 0-26.1-74.6C372.3 104.6 360.2 96 346.6 96L165.4 96c-13.6 0-25.7 8.6-30.2 21.4zM39.6 196.8L74.8 96.3C88.3 57.8 124.6 32 165.4 32l181.2 0c40.8 0 77.1 25.8 90.6 64.3l35.2 100.5c23.2 9.6 39.6 32.5 39.6 59.2l0 192c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-32-320 0 0 32c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32L0 256c0-26.7 16.4-49.6 39.6-59.2zM128 304a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-ship':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 640 512"
          fill={fill ?? 'currentColor'}>
          <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="M272 0c-26.5 0-48 21.5-48 48l0 16-16 0c-44.2 0-80 35.8-80 80l0 108.8-21.6 8.6c-14.8 5.9-22.5 22.4-17.4 37.5 10.4 31.3 26.8 59.3 47.7 83.1 20.1-9.2 41.7-13.9 63.3-14 33.1-.2 66.3 10.2 94.4 31.4l1.6 1.2 0-215-104 41.6 0-83.2c0-8.8 7.2-16 16-16l224 0c8.8 0 16 7.2 16 16l0 83.2-104-41.6 0 215 1.6-1.2c27.5-20.7 59.9-31.2 92.4-31.4 22.3-.1 44.6 4.5 65.3 14 20.9-23.7 37.3-51.8 47.7-83.1 5-15.2-2.6-31.6-17.4-37.5L512 252.8 512 144c0-44.2-35.8-80-80-80l-16 0 0-16c0-26.5-21.5-48-48-48L272 0zM403.4 476.1c21.3-16.1 49.9-16.1 71.2 0 19 14.4 41.9 28.2 67.2 33.3 26.5 5.4 54.3 .8 80.7-19.1 10.6-8 12.7-23 4.7-33.6s-23-12.7-33.6-4.7c-14.9 11.2-28.6 13.1-42.3 10.3-14.9-3-30.9-11.9-47.8-24.6-38.4-29-90.5-29-129 0-24 18.1-40.7 26.3-54.5 26.3s-30.5-8.2-54.5-26.3c-38.4-29-90.5-29-129 0-21.6 16.3-41.3 25.8-58.9 25.7-9.6-.1-19.9-3-31.2-11.5-10.6-8-25.6-5.9-33.6 4.7S7 482.3 17.6 490.3c19.1 14.4 39.4 21 59.8 21.1 33.9 .2 64.3-17.4 88.1-35.3 21.3-16.1 49.9-16.1 71.2 0 24.2 18.3 52.3 35.9 83.4 35.9s59.1-17.7 83.4-35.9z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-wifi':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 576 512"
          fill={fill ?? 'currentColor'}>
          <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="M288 96c-90.9 0-173.2 36-233.7 94.6-12.7 12.3-33 12-45.2-.7s-12-33 .7-45.2C81.7 74.9 179.9 32 288 32S494.3 74.9 566.3 144.7c12.7 12.3 13 32.6 .7 45.2s-32.6 13-45.2 .7C461.2 132 378.9 96 288 96zM240 432a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM168 326.2c-11.7 13.3-31.9 14.5-45.2 2.8s-14.5-31.9-2.8-45.2C161 237.4 221.1 208 288 208s127 29.4 168 75.8c11.7 13.3 10.4 33.5-2.8 45.2s-33.5 10.4-45.2-2.8C378.6 292.9 335.8 272 288 272s-90.6 20.9-120 54.2z"
            fill="currentColor"
          />
        </svg>
      );

    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"
          fill={fill ?? 'currentColor'}>
          {/* <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-plane':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 576 512"
          fill={fill ?? 'currentColor'}>
          <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="M520 200c30.9 0 56 25.1 56 56s-25.1 56-56 56l-127.3 0-159.2 173.6c-6.1 6.6-14.6 10.4-23.6 10.4l-43.7 0c-10.9 0-18.6-10.7-15.2-21.1l54.3-162.9-99.7 0-52.8 66c-3 3.8-7.6 6-12.5 6l-19.8 0c-10.4 0-18-9.8-15.5-19.9L32 256 5 147.9C2.4 137.8 10.1 128 20.5 128l19.8 0c4.9 0 9.5 2.2 12.5 6l52.8 66 99.7 0-54.3-162.9C147.6 26.7 155.3 16 166.2 16l43.7 0c9 0 17.5 3.8 23.6 10.4L392.7 200 520 200z"
            fill="currentColor"
          />
        </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"
          fill={fill ?? 'currentColor'}>
          <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"
          fill={fill ?? 'currentColor'}>
          <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"
          fill={fill ?? 'currentColor'}>
          {/* <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>
      );

    case 'ui-flag':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 448 512"
          fill={fill ?? 'currentColor'}>
          <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 24C48 10.7 37.3 0 24 0S0 10.7 0 24L0 488c0 13.3 10.7 24 24 24s24-10.7 24-24l0-100 80.3-20.1c41.1-10.3 84.6-5.5 122.5 13.4 44.2 22.1 95.5 24.8 141.7 7.4l34.7-13c12.5-4.7 20.8-16.6 20.8-30l0-279.7c0-23-24.2-38-44.8-27.7l-9.6 4.8c-46.3 23.2-100.8 23.2-147.1 0-35.1-17.6-75.4-22-113.5-12.5L48 52 48 24zm0 77.5l96.6-24.2c27-6.7 55.5-3.6 80.4 8.8 54.9 27.4 118.7 29.7 175 6.8l0 241.8-24.4 9.1c-33.7 12.6-71.2 10.7-103.4-5.4-48.2-24.1-103.3-30.1-155.6-17.1l-68.6 17.2 0-237z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-moon':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 512 512"
          fill={fill ?? 'currentColor'}>
          <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="M239.3 48.7c-107.1 8.5-191.3 98.1-191.3 207.3 0 114.9 93.1 208 208 208 33.3 0 64.7-7.8 92.6-21.7-103.4-23.4-180.6-115.8-180.6-226.3 0-65.8 27.4-125.1 71.3-167.3zM0 256c0-141.4 114.6-256 256-256 19.4 0 38.4 2.2 56.7 6.3 9.9 2.2 17.3 10.5 18.5 20.5s-4 19.8-13.1 24.4c-60.6 30.2-102.1 92.7-102.1 164.8 0 101.6 82.4 184 184 184 5 0 9.9-.2 14.8-.6 10.1-.8 19.6 4.8 23.8 14.1s2 20.1-5.3 27.1C387.3 484.8 324.8 512 256 512 114.6 512 0 397.4 0 256z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-extended':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 448 512"
          fill={fill ?? 'currentColor'}>
          <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="M0 96C0 60.7 28.7 32 64 32l320 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64-64 0zm320 0l-192 0 0 64 192 0 0-64zM64 224l0 64 64 0 0-64-64 0zm320 0l-192 0 0 64 192 0 0-64zM64 352l0 64 64 0 0-64-64 0zm320 0l-192 0 0 64 192 0 0-64z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-compact':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 448 512"
          fill={fill ?? 'currentColor'}>
          <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="M384 96l0 128-128 0 0-128 128 0zm0 192l0 128-128 0 0-128 128 0zM192 224l-128 0 0-128 128 0 0 128zM64 288l128 0 0 128-128 0 0-128zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-list':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 512 512"
          fill={fill ?? 'currentColor'}>
          <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="M64 112c-8.8 0-16 7.2-16 16l0 256c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-256c0-8.8-7.2-16-16-16L64 112zM0 128C0 92.7 28.7 64 64 64l384 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128zM160 320a32 32 0 1 1 -64 0 32 32 0 1 1 64 0zm-32-96a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm104-56l160 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-160 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 128l160 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-160 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-circle-check':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 512 512"
          fill={fill ?? 'currentColor'}>
          <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 1 0-512 256 256 0 1 1 0 512zM374 145.7c-10.7-7.8-25.7-5.4-33.5 5.3L221.1 315.2 169 263.1c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l72 72c5 5 11.8 7.5 18.8 7s13.4-4.1 17.5-9.8L379.3 179.2c7.8-10.7 5.4-25.7-5.3-33.5z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-circle-half':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 512 512"
          fill={fill ?? 'currentColor'}>
          <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="M448 256c0-106-86-192-192-192l0 384c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0 256 256 0 1 1 -512 0z" fill="currentColor" />
        </svg>
      );

    case 'ui-men':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 512 512"
          fill={fill ?? 'currentColor'}>
          <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="M320 32c0-17.7 14.3-32 32-32L480 0c17.7 0 32 14.3 32 32l0 128c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-50.7-95 95c19.5 28.4 31 62.7 31 99.8 0 97.2-78.8 176-176 176S32 401.2 32 304 110.8 128 208 128c37 0 71.4 11.4 99.8 31l95-95-50.7 0c-17.7 0-32-14.3-32-32zM208 416a112 112 0 1 0 0-224 112 112 0 1 0 0 224z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-women':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 384 512"
          fill={fill ?? 'currentColor'}>
          <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="M80 176a112 112 0 1 1 224 0 112 112 0 1 1 -224 0zM223.9 349.1C305.9 334.1 368 262.3 368 176 368 78.8 289.2 0 192 0S16 78.8 16 176c0 86.3 62.1 158.1 144.1 173.1-.1 1-.1 1.9-.1 2.9l0 64-32 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l32 0 0 32c0 17.7 14.3 32 32 32s32-14.3 32-32l0-32 32 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-32 0 0-64c0-1 0-1.9-.1-2.9z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-other':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 640 512"
          fill={fill ?? 'currentColor'}>
          <HTMLComment text="!Font Awesome Free 6.7.2 - mars-and-venus" />
          {title && <title>{title}</title>}

          <path
            d="M320 32c0-17.7 14.3-32 32-32l128 0c17.7 0 32 14.3 32 32l0 128c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-50.7-64.2 64.2c19.5 28.4 31 62.7 31 99.8 0 97.2-78.8 176-176 176S32 401.2 32 304s78.8-176 176-176c37.1 0 71.4 11.5 99.8 31l64.2-64.2L320 96c-17.7 0-32-14.3-32-32zM208 416a112 112 0 1 0 0-224 112 112 0 1 0 0 224z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-facebook':
      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="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5l0-170.3-52.8 0 0-78.2 52.8 0 0-33.7c0-87.1 39.4-127.5 125-127.5 16.2 0 44.2 3.2 55.7 6.4l0 70.8c-6-.6-16.5-1-29.6-1-42 0-58.2 15.9-58.2 57.2l0 27.8 83.6 0-14.4 78.2-69.3 0 0 175.9C413.8 494.8 512 386.9 512 256z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-instagram':
      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="M194.4 211.7a53.3 53.3 0 1 0 59.2 88.6 53.3 53.3 0 1 0 -59.2-88.6zm142.3-68.4c-5.2-5.2-11.5-9.3-18.4-12-18.1-7.1-57.6-6.8-83.1-6.5-4.1 0-7.9 .1-11.2 .1s-7.2 0-11.4-.1c-25.5-.3-64.8-.7-82.9 6.5-6.9 2.7-13.1 6.8-18.4 12s-9.3 11.5-12 18.4c-7.1 18.1-6.7 57.7-6.5 83.2 0 4.1 .1 7.9 .1 11.1s0 7-.1 11.1c-.2 25.5-.6 65.1 6.5 83.2 2.7 6.9 6.8 13.1 12 18.4s11.5 9.3 18.4 12c18.1 7.1 57.6 6.8 83.1 6.5 4.1 0 7.9-.1 11.2-.1s7.2 0 11.4 .1c25.5 .3 64.8 .7 82.9-6.5 6.9-2.7 13.1-6.8 18.4-12s9.3-11.5 12-18.4c7.2-18 6.8-57.4 6.5-83 0-4.2-.1-8.1-.1-11.4s0-7.1 .1-11.4c.3-25.5 .7-64.9-6.5-83-2.7-6.9-6.8-13.1-12-18.4l0 .2zm-67.1 44.5c18.1 12.1 30.6 30.9 34.9 52.2s-.2 43.5-12.3 61.6c-6 9-13.7 16.6-22.6 22.6s-19 10.1-29.6 12.2c-21.3 4.2-43.5-.2-61.6-12.3s-30.6-30.9-34.9-52.2 .2-43.5 12.2-61.6 30.9-30.6 52.2-34.9 43.5 .2 61.6 12.2l.1 0zm29.2-1.3c-3.1-2.1-5.6-5.1-7.1-8.6s-1.8-7.3-1.1-11.1 2.6-7.1 5.2-9.8 6.1-4.5 9.8-5.2 7.6-.4 11.1 1.1 6.5 3.9 8.6 7 3.2 6.8 3.2 10.6c0 2.5-.5 5-1.4 7.3s-2.4 4.4-4.1 6.2-3.9 3.2-6.2 4.2-4.8 1.5-7.3 1.5c-3.8 0-7.5-1.1-10.6-3.2l-.1 0zM448 96c0-35.3-28.7-64-64-64L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320zM357 389c-18.7 18.7-41.4 24.6-67 25.9-26.4 1.5-105.6 1.5-132 0-25.6-1.3-48.3-7.2-67-25.9s-24.6-41.4-25.8-67c-1.5-26.4-1.5-105.6 0-132 1.3-25.6 7.1-48.3 25.8-67s41.5-24.6 67-25.8c26.4-1.5 105.6-1.5 132 0 25.6 1.3 48.3 7.1 67 25.8s24.6 41.4 25.8 67c1.5 26.3 1.5 105.4 0 131.9-1.3 25.6-7.1 48.3-25.8 67l0 .1z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-linkedin':
      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 v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc." />
          {title && <title>{title}</title>}
          <path
            d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm5 170.2l66.5 0 0 213.8-66.5 0 0-213.8zm71.7-67.7a38.5 38.5 0 1 1 -77 0 38.5 38.5 0 1 1 77 0zM317.9 416l0-104c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9l0 105.8-66.4 0 0-213.8 63.7 0 0 29.2 .9 0c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9l0 117.2-66.4 0z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-search':
      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 v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc." />
          {title && <title>{title}</title>}
          <path
            d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-home':
      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 v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc." />
          {title && <title>{title}</title>}
          <path
            d="M277.8 8.6c-12.3-11.4-31.3-11.4-43.5 0l-224 208c-9.6 9-12.8 22.9-8 35.1S18.8 272 32 272l16 0 0 176c0 35.3 28.7 64 64 64l288 0c35.3 0 64-28.7 64-64l0-176 16 0c13.2 0 25-8.1 29.8-20.3s1.6-26.2-8-35.1l-224-208zM240 320l32 0c26.5 0 48 21.5 48 48l0 96-128 0 0-96c0-26.5 21.5-48 48-48z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-arrow':
      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 v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc." />
          {title && <title>{title}</title>}
          <path
            d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 288 480 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-370.7 0 105.4-105.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-bag':
      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 v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc." />
          {title && <title>{title}</title>}
          <path
            d="M160 80c0-35.3 28.7-64 64-64s64 28.7 64 64l0 48-128 0 0-48zm-48 48l-64 0c-26.5 0-48 21.5-48 48L0 384c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-208c0-26.5-21.5-48-48-48l-64 0 0-48c0-61.9-50.1-112-112-112S112 18.1 112 80l0 48zm24 48a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm152 24a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-seat':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 128 128">
          {title && <title>{title}</title>}
          <path
            d="M44.7,46.3c-2.1-13.7,17.6-17.8,20.8-3.9l5.4,26.8l20.1,0c5.8,0,8.9,4.7,8.9,9v36.4c0,8.9-12.6,8.8-12.6-0.2V86.2H61.6  c-6,0-9.7-4.1-10.6-8.8L44.7,46.3z"
            fill="currentColor"
          />
          <path d="M54.1,30.3c6.5,0,11.8-5.2,11.9-11.8C66,12,60.7,6.7,54.1,6.7c-6.5,0-11.8,5.2-11.8,11.7C42.3,25,47.5,30.3,54.1,30.3" fill="currentColor" />
          <path
            d="M28.4,60.6c-1.4-7.6,8.6-9.4,10-1.8l4.4,23.9c1,5,4.6,9.2,9.8,10.8c1.6,0.5,3.3,0.5,4.8,0.6l14.5,0.1  c7.7,0,7.7,10.1-0.1,10.1l-15.2-0.1c-2.3,0-4.7-0.3-7-1c-9-2.7-15.3-10.1-16.9-18.7L28.4,60.6z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-refund':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 576 512">
          <HTMLComment text="!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc." />
          {title && <title>{title}</title>}
          <path
            d="M288-16c-13.3 0-24 10.7-24 24l0 12-1.8 0c-36.6 0-66.2 29.7-66.2 66.2 0 33.4 24.9 61.6 58 65.7l61 7.6c5.1 .6 9 5 9 10.2 0 5.7-4.6 10.2-10.2 10.2L240 180c-15.5 0-28 12.5-28 28s12.5 28 28 28l24 0 0 12c0 13.3 10.7 24 24 24s24-10.7 24-24l0-12 1.8 0c36.6 0 66.2-29.7 66.2-66.2 0-33.4-24.9-61.6-58-65.7l-61-7.6c-5.1-.6-9-5-9-10.2 0-5.7 4.6-10.2 10.2-10.2L328 76c15.5 0 28-12.5 28-28s-12.5-28-28-28l-16 0 0-12c0-13.3-10.7-24-24-24zM109.3 341.5L66.7 384 32 384c-17.7 0-32 14.3-32 32l0 64c0 17.7 14.3 32 32 32l320.5 0c29 0 57.3-9.3 80.7-26.5l126.6-93.3c17.8-13.1 21.6-38.1 8.5-55.9s-38.1-21.6-55.9-8.5L392.6 416 280 416c-13.3 0-24-10.7-24-24s10.7-24 24-24l72 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-152.2 0c-33.9 0-66.5 13.5-90.5 37.5z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-priority':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 576 512">
          <HTMLComment text="!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc." />
          {title && <title>{title}</title>}
          <path
            d="M104.5 24a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm-8 181.3L73.9 227.9c-6 6-9.4 14.1-9.4 22.6l0 37.5c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-37.5c0-25.5 10.1-49.9 28.1-67.9l35.1-35.1c22.8-22.8 53.6-35.6 85.8-35.6 36.9 0 71.8 16.8 94.8 45.6L262.3 180c6.1 7.6 15.3 12 25 12l33.2 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-33.2 0c-29.2 0-56.7-13.3-75-36l-3.8-4.7 0 115.2 34.5 29.6c17.7 15.2 29.3 36.2 32.6 59.3l12.6 88.1c2.5 17.5-9.7 33.7-27.2 36.2s-33.7-9.7-36.2-27.2l-12.6-88.1c-1.1-7.7-5-14.7-10.9-19.8L130 347.5c-21.3-18.2-33.5-44.9-33.5-72.9l0-69.3zM96.6 371c2.4 2.3 4.8 4.6 7.4 6.8l46 39.4-2.2 7.6c-4.5 15.7-12.9 30-24.4 41.5L55.1 534.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l68.3-68.3c3.8-3.8 6.6-8.6 8.1-13.8L96.6 371zM505.5 345c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l31-31-102.1 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l102.1 0-31-31c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l72 72c9.4 9.4 9.4 24.6 0 33.9l-72 72z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-lounge':
      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 v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc." />
          {title && <title>{title}</title>}
          <path
            d="M144 272C144 224.7 109.8 185.4 64.8 177.5 72 113.6 126.2 64 192 64l256 0c65.8 0 120 49.6 127.2 113.5-45 8-79.2 47.2-79.2 94.5l0 32-352 0 0-32zM0 384L0 272c0-26.5 21.5-48 48-48s48 21.5 48 48l0 80 448 0 0-80c0-26.5 21.5-48 48-48s48 21.5 48 48l0 112c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-else':
      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 v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc." />
          {title && <title>{title}</title>}
          <path
            d="M0 96C0 60.7 28.7 32 64 32l320 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64-64 0zm320 0l-192 0 0 64 192 0 0-64zM64 224l0 64 64 0 0-64-64 0zm320 0l-192 0 0 64 192 0 0-64zM64 352l0 64 64 0 0-64-64 0zm320 0l-192 0 0 64 192 0 0-64z"
            fill="currentColor"
          />
        </svg>
      );

    case 'ui-excursion':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 384 512"
          fill={fill ?? 'currentColor'}>
          <HTMLComment text="!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc." />
          {title && <title>{title}</title>}
          <path d="M80.95 472.23c-4.28 17.16 6.14 34.53 23.28 38.81 2.61.66 5.22.95 7.8.95 14.33 0 27.37-9.7 31.02-24.23l25.24-100.97-52.78-52.78-34.56 138.22zm14.89-196.12L137 117c2.19-8.42-3.14-16.95-11.92-19.06-43.88-10.52-88.35 15.07-99.32 57.17L.49 253.24c-2.19 8.42 3.14 16.95 11.92 19.06l63.56 15.25c8.79 2.1 17.68-3.02 19.87-11.44zM368 160h-16c-8.84 0-16 7.16-16 16v16h-34.75l-46.78-46.78C243.38 134.11 228.61 128 212.91 128c-27.02 0-50.47 18.3-57.03 44.52l-26.92 107.72a32.012 32.012 0 0 0 8.42 30.39L224 397.25V480c0 17.67 14.33 32 32 32s32-14.33 32-32v-82.75c0-17.09-6.66-33.16-18.75-45.25l-46.82-46.82c.15-.5.49-.89.62-1.41l19.89-79.57 22.43 22.43c6 6 14.14 9.38 22.62 9.38h48v240c0 8.84 7.16 16 16 16h16c8.84 0 16-7.16 16-16V176c.01-8.84-7.15-16-15.99-16zM240 96c26.51 0 48-21.49 48-48S266.51 0 240 0s-48 21.49-48 48 21.49 48 48 48z" />
        </svg>
      );

    case 'ui-group':
      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="M72 88a56 56 0 1 1 112 0A56 56 0 1 1 72 88zM64 245.7C54 256.9 48 271.8 48 288s6 31.1 16 42.3l0-84.7zm144.4-49.3C178.7 222.7 160 261.2 160 304c0 34.3 12 65.8 32 90.5l0 21.5c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32-14.3-32-32l0-26.8C26.2 371.2 0 332.7 0 288c0-61.9 50.1-112 112-112l32 0c24 0 46.2 7.5 64.4 20.3zM448 416l0-21.5c20-24.7 32-56.2 32-90.5c0-42.8-18.7-81.3-48.4-107.7C449.8 183.5 472 176 496 176l32 0c61.9 0 112 50.1 112 112c0 44.7-26.2 83.2-64 101.2l0 26.8c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32-14.3-32-32zm8-328a56 56 0 1 1 112 0A56 56 0 1 1 456 88zM576 245.7l0 84.7c10-11.3 16-26.1 16-42.3s-6-31.1-16-42.3zM320 32a64 64 0 1 1 0 128 64 64 0 1 1 0-128zM240 304c0 16.2 6 31 16 42.3l0-84.7c-10 11.3-16 26.1-16 42.3zm144-42.3l0 84.7c10-11.3 16-26.1 16-42.3s-6-31.1-16-42.3zM448 304c0 44.7-26.2 83.2-64 101.2l0 42.8c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32-14.3-32-32l0-42.8c-37.8-18-64-56.5-64-101.2c0-61.9 50.1-112 112-112l32 0c61.9 0 112 50.1 112 112z"
            fill="currentColor"
          />
        </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-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-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-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-triangle-error':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 512 512"
          fill={fill ?? 'currentColor'}>
          <HTMLComment text="!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc." />
          {title && <title>{title}</title>}
          <path d="M256 0c14.7 0 28.2 8.1 35.2 21l216 400c6.7 12.4 6.4 27.4-.8 39.5S486.1 480 472 480L40 480c-14.1 0-27.2-7.4-34.4-19.5s-7.5-27.1-.8-39.5l216-400c7-12.9 20.5-21 35.2-21zm0 352a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.5 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z" />
        </svg>
      );

    case 'ui-shopping-cart':
      return (
        <svg
          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
          width={width}
          height={height}
          viewBox="0 0 640 512"
          fill={fill ?? 'currentColor'}>
          <HTMLComment text="!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc." />
          {title && <title>{title}</title>}
          <path d="M24-16C10.7-16 0-5.3 0 8S10.7 32 24 32l45.3 0c3.9 0 7.2 2.8 7.9 6.6l52.1 286.3c6.2 34.2 36 59.1 70.8 59.1L456 384c13.3 0 24-10.7 24-24s-10.7-24-24-24l-255.9 0c-11.6 0-21.5-8.3-23.6-19.7l-5.1-28.3 303.6 0c30.8 0 57.2-21.9 62.9-52.2L568.9 69.9C572.6 50.2 557.5 32 537.4 32l-412.7 0-.4-2c-4.8-26.6-28-46-55.1-46L24-16zM208 512a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm224 0a48 48 0 1 0 0-96 48 48 0 1 0 0 96z" />
        </svg>
      );
    default:
      return null;
  }
};

export default Icon;