@fortawesome/free-solid-svg-icons#faTimes TypeScript Examples

function FileTabItem(props: IFileTabItemProps) {
  return (
    <div className={cls(style.file_tab_item, props.active && style.active)} onClick={props.onClick}>
      <span>{props.filename}</span>
      <button className={style.close_btn} onClick={props.onClose}>
        <FontAwesomeIcon icon={faTimes}/>
      </button>
    </div>
  );
}

render() {
        return (
            <div className={`panel-component ${this.props.className ?? ""}`}>
                {this.props.title &&
                <div className="panel-title" style={{
                    backgroundColor: this.props.backgroundColor
                }}>
                    {this.props.title}
                </div>
                }
                {this.props.onCloseRequest &&
                <div className="panel-close-container" onClick={this.props.onCloseRequest} style={{
                    backgroundColor: this.props.backgroundColor
                }}>
                    <FontAwesomeIcon icon={faTimes} />
                </div>
                }
                {this.props.children}
            </div>
        );
    }

library.add(
  faChevronLeft,
  faPlay,
  faPause,
  faUndo,
  faClock,
  faQuestionCircle,
  faTimes,
  faPalette,

  // Icons for the game
  faPoo,
  faAnchor,
  faMoon,
  faAppleAlt,
  faBell,
  faBible,
  faBomb,
  faBone,
  faCar,
  faCat,
  faChess,
  faSkull,
  faFeatherAlt,
  faFire,
  faHeart,
  faMusic,
)

render() {
    const roleArr = [];
    const cardArr = [];

    if (this.props.roleSettings.merlin) roleArr.push('Merlin');
    if (this.props.roleSettings.percival) roleArr.push('Percival');
    if (this.props.roleSettings.morgana) roleArr.push('Morgana');
    if (this.props.roleSettings.assassin) roleArr.push('Assassin');
    if (this.props.roleSettings.oberon) roleArr.push('Oberon');
    if (this.props.roleSettings.mordred) roleArr.push('Mordred');
    if (this.props.roleSettings.lady) cardArr.push('Lady of the Lake');

    return (
      <div className="settings-form">
        <AvalonScrollbars>
          <form autoComplete="off">
            <p className="title">GAME INFO</p>
            <p className="subtitle">Player Max</p>
            <div className="input-container">
              <p className="handle">{this.props.playerMax}</p>{' '}
            </div>
            <p className="subtitle">Roles</p>
            <div className="input-container">
              <p className="handle">{roleArr.toString().replace(/,/g, ', ')}</p>{' '}
            </div>
            <p className="subtitle">Cards</p>
            <div className="input-container">
              <p className="handle">{cardArr.toString().replace(/,/g, ', ')}</p>{' '}
            </div>
            <div className="buttons">
              <button className="bt-cancel" type="button" onClick={this.props.onExit}>
                <FontAwesomeIcon icon={faTimes} />
              </button>
            </div>
          </form>
        </AvalonScrollbars>
      </div>
    );
  }

library.add(
  faDotCircle,
  faCircle,
  faBars,
  faTimes,
  faInfoCircle,
  faTrophy,
  faShareSquare,
  faHeart,
  faInstagram,
  faTwitter,
  faGithub,
  faFacebook,
  faHandPointRight,
  faEdit,
  faSave,
  faCamera,
  faPlus,
  faMinus,
  faRandom,
);

/**
 * Icons listed here no longer need to be imported in other files.
 * Instead a string can be passed to the `icon` property.
 * By default, the icons are all "solid", which is why `far` is also added ...
 * ... simply do `icon={["far", "icon-name"]}` to use the "regular" version of "icon-name"
 * @see https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react#using
 */
library.add(
  far,
  faCog,
  faSearch,
  faTimes,
  faWindowRestore,
  faEllipsisV,
  faWindowMaximize,
  faTimesCircle,
  faStar,
  faMask,
  faExclamationCircle,
  faCopy,
  faAngleDown,
  faAngleUp,
  faCheckCircle,
  faUpload
);

render() {
    return (
      <div className="settings-form">
        <AvalonScrollbars>
          <form autoComplete="off">
            <FontAwesomeIcon
              icon={faExclamation}
              className="unnecessarily-huge-exclamation-mark"
            />
            <h1>CALM DOWN!</h1>
            <h2>You are sending messages too fast!</h2>
            <p className="center">
              Wait a few seconds before you start sending messages again.
            </p>
            <div className="buttons">
              <button className="bt-cancel" type="button" onClick={this.props.onExit}>
                <FontAwesomeIcon icon={faTimes} />
              </button>
            </div>
          </form>
        </AvalonScrollbars>
      </div>
    );
  }

dismissibleToast = (message: JSX.Element | string | null): ((t: Toast) => JSX.Element) => {
    return function dismissibleToast(t: Toast): JSX.Element {
        return (
            <Container>
                <div>{message}</div>
                <Dismiss onClick={() => toast.dismiss(t.id)}>
                    <FontAwesomeIcon icon={faTimes} />
                </Dismiss>
            </Container>
        )
    }
}

constructor(faIconLibrary: FaIconLibrary) {
    faIconLibrary.addIcons(
      faGithub,
      faMediumM,
      faPlus,
      faEdit,
      faTrash,
      faTimes,
      faCaretUp,
      faCaretDown,
      faExclamationTriangle,
      faFilter,
      faTasks,
      faCheck,
      faSquare,
      faLanguage,
      faPaintBrush,
      faLightbulb,
      faWindowMaximize,
      faStream,
      faBook
    );
  }

render() {
    return (
      <div className="settings-form">
        <AvalonScrollbars>
          <form autoComplete="off">
            <p className="title">{this.props.title}</p>
            <div className="input-container">
              <p className="handle">Players</p>{' '}
              <List
                objects={this.props.players.map((player) => {
                  return {
                    text: player,
                    onClick: () => {
                      this.selectPlayer(player);
                    },
                  };
                })}
                show={this.state.show}
                title={this.state.selected.length > 0 ? this.state.selected : 'Select a player...'}
                onClick={() => {
                  this.toggleShow();
                }}
              />
            </div>
            <div className="buttons">
              <button className="bt-cancel" type="button" onClick={this.props.onExit}>
                <FontAwesomeIcon icon={faTimes} />
              </button>
              <Button className="" type="button" text={this.props.text} onClick={this.onClick} />
            </div>
          </form>
        </AvalonScrollbars>
      </div>
    );
  }

export function CopyToClipboard({ value }: ICopyToClipboardProps) {
	const [copied, setCopied] = useState<boolean | null>(null)
	const copyHandler = useCallback(async () => {
		try {
			await navigator.clipboard.writeText(value)
			setCopied(true)
		} catch {
			setCopied(false)
		}
	}, [value])

	return <Tooltip title="Copy To Clipboard" placement="top">
		<IconButton
			color={copied === true ? "success" : (copied === false ? "warning" : "default")}
			onClick={copyHandler}
		>
			<Icon icon={copied === true ? faCheck : (copied === false ? faTimes : faCopy)}/>
		</IconButton>
	</Tooltip>
}

WarningToast = ({ text, onClose }: { text: string, onClose: () => void }) => {
  const AUTO_CLOSE_DELAY = 3; // seconds
  useEffect(() => {
    const timeoutId = setTimeout(onClose, AUTO_CLOSE_DELAY * 1000);
    return () => {
      clearTimeout(timeoutId);
    };
  }, []);

  return (
    <div className={`absolute ${styles.WarningToast}`}>
      <p className="m-0">
        {text}
      </p>
      <Button className="text-white" variant="transparent" onClick={onClose}>
        <FontAwesomeIcon width={16} icon={faTimes} />
      </Button>
    </div>
  );
}

export function TransactionPending({ transaction }: ITransactionInfoProps) {
	const [state, setState] = useState<"resolve" | "reject" | "pending">("pending")
	useEffect( () => {
		transaction.wait()
			.then(() => setState("resolve"))
			.catch(() => setState("reject"))
	}, [transaction])

	return <Box sx={{ my: 1 }}>
		<>
			{ state === "pending" && <><CircularProgress size={14}/> Processing</> }
			{ state === "resolve" && <Chip
				label="Confirmed"
				icon={<Icon icon={faCheckDouble}/>}
				variant="outlined"
				color="success"
				size="small"
			/> }
			{ state === "reject" && <Chip
				label="Rejected"
                icon={<Icon icon={faTimes}/>}
                variant="outlined"
                color="error"
				size="small"
			/> }
		</>
	</Box>
}

export default function
LessonMenu({
  isOpen,
  close,
  chapters,
  title,
  url,
  onScrollTop,
  className = '',
} : Props) {
  const ref = useRef(null);
  useOutsideClick(ref, close);

  return (
    <aside ref={ref} className={`${styles['lesson-menu']}${isOpen ? ` ${styles['lesson-menu--open']}` : ''} ${className} bg-black text-white`}>
      <header className="lesson-menu__header d-flex justify-content-between align-items-center">
        <Link href={url}>
          <a onClick={onScrollTop}>
            <h2>
              {title}
            </h2>
          </a>
        </Link>
        <Button onClick={close}>
          <FontAwesomeIcon icon={faTimes} />
        </Button>
      </header>
      <TableOfContents onChapterClick={close} chapters={chapters} />
    </aside>
  );
}

export default function AdminActionOverlay({
    children,
    heading,
    onClose
}: Props): ReactElement {
    return (
        <div className="w-screen h-screen absolute flex p-20">
            <div className="z-50 m-auto max-w-screen-md max-h-screen-md w-full border border-gray-500 rounded shadow-md backgroundShade p-5">
                <div className="flex flex-row justify-between">
                    <Heading className="mb-5" size={2} text={heading}></Heading>
                    <ButtonIcon
                        className="p-1"
                        color="text-gray-200"
                        title="Close"
                        icon={
                            <FontAwesomeIcon
                                icon={faTimes}
                                size="lg"
                            ></FontAwesomeIcon>
                        }
                        onClick={(): void => onClose()}
                    ></ButtonIcon>
                </div>
                {children}
            </div>
        </div>
    );
}

Toast = () => {
  const dispatch = useDispatch();

  const open = useSelector((state: RootState) => state.toast.open);
  const message = useSelector((state: RootState) => state.toast.message);
  const severity = useSelector((state: RootState) => state.toast.severity);

  let timer: ReturnType<typeof setTimeout>;

  function handleClose() {
    dispatch(clearToast());
  }

  useEffect(() => {
    if (open) {
      timer = setTimeout(() => {
        handleClose();
      }, TOAST_AUTO_HIDE_DURATION);
    }
    return () => clearTimeout(timer);
  }, [open]);

  return (
    <Snackbar open={open}>
      <Alert
        severity={severity}
        action={
          <Button
            color="inherit"
            size="small"
            onClick={handleClose}
            data-testid="toast-close"
            css={css`
              min-width: 0;
            `}
          >
            <FontAwesomeIcon icon={faTimes} />
          </Button>
        }
      >
        {message}
      </Alert>
    </Snackbar>
  );
}

export default function Alert({
    text,
    className,
    mode,
    onCloseButton
}: Props): JSX.Element {
    return (
        <div
            className={
                'flex max-w-md items-center font-bold px-2 py-2 border rounded z-50 backgroundShade' +
                (className ? ' ' + className : '') +
                (mode === 'error'
                    ? ' border-red-600 text-red-600'
                    : ' border-yellow-400 text-yellow-400')
            }
            role="alert"
        >
            <svg
                className="fill-current w-4 h-4 mr-2 self-start mt-1"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
            >
                <path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z" />
            </svg>
            <p>{text}</p>
            {onCloseButton && (
                <ButtonIcon
                    className="p-1 ml-auto self-start"
                    color={
                        mode === 'error' ? ' text-red-600' : ' text-yellow-400'
                    }
                    title="Close"
                    icon={
                        <FontAwesomeIcon
                            icon={faTimes}
                            size="lg"
                        ></FontAwesomeIcon>
                    }
                    onClick={(event): void => onCloseButton(event)}
                ></ButtonIcon>
            )}
        </div>
    );
}

InvitePopup: React.FC<IInviteProps> = ({ isOpen, memberLoading, isData }) => {
  const history = useHistory();
  const { fetchUser } = useContext<IActionModel>(ActionContext);

  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid",
    },
  };

  const defaultOptionsX = {
    loop: true,
    autoplay: true,
    animationData: animationDataX,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid",
    },
  };

  return (
    <Popup
      open={isOpen && !memberLoading}
      position="center center"
      className="invite-popup"
      modal
      nested
    >
      <div className="modal-container">
        <div className="close-btn-container">
          <button
            className="close-modal"
            onClick={() => {
              history.push("/dashboard/members");
              fetchUser();
            }}
          >
            <FontAwesomeIcon icon={faTimes} className="close-icon"></FontAwesomeIcon>
          </button>
        </div>
        {isData ? (
          <div className="success-container">
            <div className="check-container">
              <Lottie options={defaultOptions} height={170} />
            </div>
            <div className="header-container">Success!</div>
            <div className="text-description">
              Invite mail sent successfully.
              <br />
              <br />
              Ask member to check his mail and confirm, to add as a member of this
              organization.
            </div>
          </div>
        ) : (
          <div className="failure-container">
            <div className="check-container">
              <Lottie options={defaultOptionsX} height={170} />
            </div>
            <div className="header-container">Uh Oh!</div>
            <div className="text-description">
              Please check the entered email and try again.
              <br />
              <br />
              You can reach out to the ArGo team if the problem persists.
            </div>
          </div>
        )}
      </div>
    </Popup>
  );
}

icons = {
  ok: <FontAwesomeIcon icon={faCheck} color="green"/>,
  error: <FontAwesomeIcon icon={faTimes} color="red"/>,
  loading: <FontAwesomeIcon icon={faCircleNotch} color="green" spin/>,
  empty: null
}

public constructor(private _matIconRegistry: MatIconRegistry, private _sanitizer: DomSanitizer) {
    this.addSvg(faAngleDoubleDown);
    this.addSvg(faArrowUp);
    this.addSvg(faArrowDown);
    this.addSvg(faSyncAlt);
    this.addSvg(faTimes);
    this.addSvg(faExternalLinkAlt);
    this.addSvg(faQuestionCircle);
    this.addSvg(faPlay);
    this.addSvg(faClock);
    this.addSvg(faBug);
    this.addSvg(faLink);
    this.addSvg(faDiscord);
    this.addSvg(faGithub);
    this.addSvg(faInfoCircle);
    this.addSvg(faCodeBranch);
    this.addSvg(faCaretDown);
    this.addSvg(faExclamationTriangle);
    this.addSvg(faCode);
    this.addSvg(faPatreon);
    this.addSvg(faCoins);
    this.addSvg(faCompressArrowsAlt);
    this.addSvg(faPencilAlt);
    this.addSvg(faCheckCircle);
    this.addSvg(faDiceD6);
    this.addSvg(faSearch);
    this.addSvg(faInfoCircle);
    this.addSvg(faNewspaper);
    this.addSvg(faCog);
    this.addSvg(faAngleUp);
    this.addSvg(faAngleDown);
    this.addSvg(faChevronRight);
    this.addSvg(faUserCircle);
    this.addSvg(faEllipsisV);
    this.addSvg(faCopy);
    this.addSvg(farCheckCircle);
    this.addSvg(faExclamation);
    this.addSvg(faTrash);
    this.addSvg(faHistory);
    this.addSvg(faCaretSquareRight);
    this.addSvg(faCaretSquareLeft);
    this.addSvg(faMinimize);
    this.addSvg(faUpRightFromSquare);
  }

render() {
        return (
            <div className="tabs-component">
                <div className="tabs-header-effects">
                    <div className={`tab-header-fade-left ${this.state.hideLeftFade ? "tab-fade-hidden" : ""}`}></div>
                    <div className={`tab-header-fade-right ${this.state.hideRightFade ? "tab-fade-hidden" : ""}`}></div>
                </div>
                <div
                    ref={this.headerContainerRef}
                    className="tab-header-container"
                    onWheel={e => {
                        const direction = e.deltaY < 0 ? -1 : e.deltaY > 0 ? 1 : 0;
                        this.headerContainerRef.current!.scrollLeft += direction * 20;
                        if (e.cancelable) {
                            e.preventDefault();
                        }
                    }}
                >
                    {this.props.tabs.map((tab, index) => (
                        <div
                            key={tab.id}
                            className={`tab-header ${this.props.selectedIndex === index ? "tab-selected" : ""}`}
                            onClick={() => this.props.onTabSelected?.(index)}
                        >
                            <div className="tab-header-name">
                                {tab.name}
                            </div>
                            {this.props.tabs.length >= 2 && this.props.onTabRemovalRequest &&
                            <div className="tab-header-actions">
                                <div
                                    className="tab-header-remove"
                                    onClick={e => {
                                        e.stopPropagation();
                                        this.props.onTabRemovalRequest?.(index);
                                    }}
                                >
                                    <FontAwesomeIcon icon={faTimes} />
                                </div>
                            </div>
                            }
                        </div>
                    ))}
                    {this.props.onRequestNewTab &&
                    <div
                        className="tab-header"
                        onClick={() => this.props.onRequestNewTab?.()}
                    >
                        <FontAwesomeIcon icon={faPlus} className="new-tab-icon" />
                    </div>
                    }
                </div>
                <div className="tab-content-container">
                    {this.props.tabs.map((tab, index) => (
                        <div key={tab.id} className={`tab-content ${index === this.props.selectedIndex ? "" : "tab-content-hidden"}`}>
                            {tab.content}
                        </div>
                    ))}
                </div>
            </div>
        );
    }

faTimes = faTimes;

constructor() {
    this.swapIcon = faExchangeAlt;
    this.depositIcon = faLevelDownAlt;
    this.withdrawIcon = faLevelUpAlt;
    this.refundIcon = faUndoAlt;
    this.addIcon = faPlus;
    this.timesIcon = faTimes;
  }

library.add(faBell, faChevronDown, faTimes, faArrowRight, faCheck, faPlusCircle,
    faExclamationCircle, faHeart, faCodeBranch, faMap, faList, faCircle,
    faDotCircle,
    faCheckCircle, faNetworkWired, faUsers, faCube, faSortUp, faSortDown,
    faEllipsisV, faSync, faMicrochip, faCheckDouble, faLaptopCode);

faTimes = faTimes;

ExerciseVersion = ({
  index,
  href,
  version,
  isActive,
  className = '',
}: ExerciseVersionProps) => {
  const dateTime = format(new Date(version.createdAt).getTime(), 'yyyy-MM-dd');

  return (
    <Link replace href={href} passHref>
      <a className={`
        ${className}
        ${styles.ExerciseVersion} 
        ${isActive ? styles['ExerciseVersion--active'] : ''}
        d-flex no-underline
        `}
      >
        <div className={`${styles.index} d-flex p-3 align-items-center text-2xl`}>
          {index}
        </div>
        <div className="p-3">
          <p className="text-bold m-0 d-flex align-items-center">
            {version.approved ? (
              <>
                <span className="mr-2"> Soluție corectă </span>
                <FontAwesomeIcon width="16" icon={faCheck} />
              </>
            ) : (
              <>
                <span className="mr-2"> Soluție respinsă </span>
                <FontAwesomeIcon width="16" icon={faTimes} />
              </>
            )}
          </p>
          <time title={dateTime} className="d-block mt-4 mb-2" dateTime={dateTime}>
            <FontAwesomeIcon width="16" className="text-silver" icon={faCalendarAlt} />
            {' '}
            {timeAgo(new Date(version.createdAt))}
          </time>
        </div>
      </a>
    </Link>
  );
}

render() {
    const { seconds } = this.state;
    const { isPlaying } = this.props;

    return (
      <div className="settings-form" onSubmit={() => null}>
        <AvalonScrollbars>
          <form autoComplete="off">
            <FontAwesomeIcon
              icon={faExclamation}
              className="unnecessarily-huge-exclamation-mark blue"
            />
            <h1>ARE YOU READY?</h1>
            <h2>GAME IS ABOUT TO START</h2>
            {isPlaying ? (
              <p className="center">
                Confirm that you are ready to start the game. You have {seconds} seconds
                left.
              </p>
            ) : (
              <p className="center">
                Waiting for players to confirm. {seconds} seconds remaining.
              </p>
            )}
            <div className="buttons">
              <button
                className="bt-cancel"
                type="button"
                onClick={isPlaying ? this.sendFalse : this.props.onExit}
              >
                <FontAwesomeIcon icon={faTimes} />
              </button>
              {isPlaying ? (
                <button className="bt-accept" type="button" onClick={this.sendTrue}>
                  <FontAwesomeIcon icon={faCheck} />
                </button>
              ) : null}
            </div>
          </form>
        </AvalonScrollbars>
      </div>
    );
  }

faTimes = faTimes;

faClose = faTimes;