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

constructor(
    private networkService: NetworkService,
    private uiStyleToggleService: UiStyleToggleService,
    private thorchainNetworkService: ThorchainNetworkService) {
      this.optimalIcon = faCheckCircle;
      this.warningIcon = faExclamationCircle;
      this.alertIcon = faExclamationTriangle;
      this.theme = localStorage.getItem('THEME');

      const network$ = this.thorchainNetworkService.networkUpdated$.subscribe(
        (_) => {
          this.getNetworkStatus();
        }
      );

      this.subs = [network$];

  }

// Description: add icons to be used in the app as needed
// Some are solid and some are from regular svg (hollow icons)
library.add(
  faSearch,
  faSearchPlus,
  faHome,
  faSpinner,
  faExclamationTriangle,
  faTrash,
  faTrashAlt,
  faEdit,
  faUser,
  faUserEdit,
  faUserPlus,
  faUserTimes,
  faUserMinus,
  faKey,
  faCheck,
  faCheckCircle,
  faCalendarDay,
  faClock,
  faCalendarAlt,
  farUser,
  faFileAlt
);

/**
 * 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
);

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);

_initFontAwesome = () => {
    if ( _hasInitializedFontAwesome ) { return; }
    _hasInitializedFontAwesome = true;

    library.add(faCheckCircle, faPlug, faQuestionCircle, faExclamationTriangle, faWifi, faMapMarkerAlt, faClock);
}

TickCircle            = (styling={}) => ComponentForIconName(faCheckCircle.iconName, '', styling)

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);
  }

MasterMissionsPage = (props: { region: Region }) => {
    const { region } = props;
    const [loading, setLoading] = useState<boolean>(true);
    const [error, setError] = useState<AxiosError | undefined>(undefined);
    const [masterMissions, setMasterMissions] = useState<MasterMission.MasterMission[]>([]);

    useEffect(() => {
        Manager.setRegion(region);
        Api.masterMissionList()
            .then((r) => {
                setMasterMissions(r);
                setLoading(false);
            })
            .catch((e) => setError(e));
    }, [region]);

    if (loading) return <Loading />;

    if (error !== undefined) return <ErrorStatus error={error} />;

    document.title = `[${region}] Master Missions - Atlas Academy DB`;

    const currentTimestamp = getCurrentTimestamp();

    return (
        <div id="master-missions" className="listing-page">
            <Table striped bordered hover responsive>
                <thead>
                    <tr>
                        <th className="col-center">#</th>
                        <th className="col-center">Ongoing</th>
                        <th>Start</th>
                        <th>End</th>
                    </tr>
                </thead>
                <tbody>
                    {masterMissions.map((masterMission) => {
                        const route = `/${region}/master-mission/${masterMission.id}`;
                        const isOngoing =
                            currentTimestamp >= masterMission.startedAt && currentTimestamp <= masterMission.endedAt;

                        return (
                            <tr key={masterMission.id}>
                                <td className="col-center">
                                    <Link to={route}>{masterMission.id} </Link>
                                </td>
                                <td className="col-center">
                                    {isOngoing ? (
                                        <FontAwesomeIcon
                                            icon={faCheckCircle}
                                            title="Master mission is ongoing right now"
                                        />
                                    ) : null}
                                </td>
                                <td>{getTimeString(masterMission.startedAt)}</td>
                                <td>{getTimeString(masterMission.endedAt)}</td>
                            </tr>
                        );
                    })}
                </tbody>
            </Table>
        </div>
    );
}

StatusIcon: React.FC<IconProps> = ({ complete, ...rest }) => (
  <FontAwesomeIcon {...rest} icon={complete ? faCheckCircle : faDotCircle} />
)

UseReferralCodePrompt: React.FC<UseReferralCodePromptProps> = ({ visible, onSubmit, onCancel }) => {
    const {
        register,
        handleSubmit,
        reset,
        trigger,
        formState: { errors },
    } = useForm<ReferralCodeFormFields>({ reValidateMode: "onSubmit" })
    const { referral, payment } = useStores()
    useEffect(() => {
        if (!visible) {
            reset()
            referral.resetToken()
        }
    }, [visible])
    const handleValidate = async () => {
        await trigger()
    }
    return (
        <Prompt
            title="Enter a referral code"
            visible={visible}
            onSubmit={referral.token ? handleSubmit(onSubmit) : handleValidate}
            onCancel={onCancel}
            submitText={referral.token ? "Apply" : "OK"}
        >
            <PromptExplanation />
            <PromptInput
                autoFocus
                placeholder="Code"
                {...register("code", {
                    required: "This is required",
                    validate: {
                        valid: async (code) => {
                            if (referral.token && code === referral.token) {
                                // Do not revalidate and toast on 'Apply'
                                return true
                            }
                            const loadingToastID = toast.loading("Validating token...")
                            const valid = await referral.validateToken(code)
                            const dismissWait = valid ? 500 : 850
                            _.debounce(() => toast.dismiss(loadingToastID), dismissWait, { trailing: true })()
                            return valid || "This token is not valid"
                        },
                    },
                })}
            />
            <PromptValidation>{errors.code?.message}</PromptValidation>
            {!!referral.rewardAmount && (
                <RewardPreview>
                    <RewardIcon className="icon" icon={faCheckCircle} color={brand} size="2x" />
                    <RewardAmount>
                        You will be awarded {referral.rewardAmount} {payment.appCurrency}(s)
                    </RewardAmount>
                </RewardPreview>
            )}
        </Prompt>
    )
}

TopupSuccess: React.FC = observer(() => {
    const { payment, identity, navigation } = useStores()
    const isOnboarding = identity.identity?.registrationStatus != IdentityRegistrationStatus.Registered
    const handleAction = () => {
        if (isOnboarding) {
            navigation.push(locations.registering)
        } else {
            navigation.goHome()
        }
    }
    useEffect(() => {
        toast.success(`${payment.appCurrency}s will be credited to your wallet within next 1-3 minutes.`)
    }, [])
    return (
        <ViewContainer>
            <ViewNavBar>
                <div style={{ width: 375, textAlign: "center" }}>
                    <StepProgressBar step={3} />
                </div>
            </ViewNavBar>
            <ViewSplit>
                <ViewSidebar>
                    <SideTop>
                        <TitleIcon>
                            <IconWallet color={brandLight} />
                        </TitleIcon>
                        <Title>Payment successful!</Title>
                        <TitleDescription>
                            {payment.appCurrency}s will be credited to your wallet within next 1-3 minutes.
                        </TitleDescription>
                    </SideTop>
                    <SideBot>
                        <BrandButton style={{ marginTop: "auto" }} onClick={handleAction}>
                            Continue
                        </BrandButton>
                    </SideBot>
                </ViewSidebar>
                <Content>
                    <div style={{ marginTop: "auto", marginBottom: "auto" }}>
                        <Heading2>
                            <FontAwesomeIcon className="icon" icon={faCheckCircle} color="#ffffff44" size="10x" />
                            <div style={{ marginTop: 20, cursor: "pointer" }} onClick={() => payment.downloadInvoice()}>
                                <FontAwesomeIcon
                                    style={{ marginRight: 10 }}
                                    className="icon"
                                    icon={faDownload}
                                    color="#ffffff44"
                                    size="1x"
                                />
                                Download invoice
                            </div>
                        </Heading2>
                    </div>
                </Content>
            </ViewSplit>
        </ViewContainer>
    )
})

render() {
        if (this.state.error) return <ErrorStatus error={this.state.error} />;

        if (this.state.loading) return <Loading />;

        const events = this.events(),
            results = events.slice(this.state.perPage * this.state.page, this.state.perPage * (this.state.page + 1));

        const pageNavigator = this.paginator(events.length);

        const currentTimestamp = getCurrentTimestamp();

        return (
            <div id="events" className="listing-page">
                <Row>
                    <Col md={12} lg={6} id="item-type">
                        <ButtonGroup>
                            {[
                                [Event.EventType.EVENT_QUEST, "Event"],
                                [Event.EventType.COMBINE_CAMPAIGN, "Servant Lvl Up"],
                                [Event.EventType.SVTEQUIP_COMBINE_CAMPAIGN, "CE Lvl Up"],
                                [Event.EventType.QUEST_CAMPAIGN, "AP Cost"],
                                [Event.EventType.WAR_BOARD, "Grail Front"],
                            ].map(([eventType, buttonText]) => {
                                return (
                                    <Button
                                        variant={
                                            this.state.activeEventTypeFilters.includes(eventType as Event.EventType)
                                                ? "success"
                                                : "outline-dark"
                                        }
                                        key={eventType}
                                        onClick={(_) => this.toggleEventTypeFilter(eventType as Event.EventType)}
                                    >
                                        {buttonText}
                                    </Button>
                                );
                            })}
                        </ButtonGroup>
                    </Col>
                    <Col md={12} lg={3} id="item-search">
                        <Form inline>
                            <Form.Control
                                placeholder={"Search"}
                                value={this.state.search ?? ""}
                                onChange={(ev: ChangeEvent) => {
                                    this.setState({
                                        search: ev.target.value,
                                        page: 0,
                                    });
                                }}
                            />
                        </Form>
                    </Col>
                </Row>
                <Row>
                    <Col sm={12}>{pageNavigator}</Col>
                </Row>
                <hr />

                <Table striped bordered hover responsive>
                    <thead>
                        <tr>
                            <th className="col-center">#</th>
                            <th className="col-center">Ongoing</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        {results.map((event) => {
                            const route = `/${this.props.region}/event/${event.id}`;
                            const isOngoing = currentTimestamp >= event.startedAt && currentTimestamp <= event.endedAt;

                            return (
                                <tr key={event.id}>
                                    <td className="col-center">
                                        <Link to={route}>{event.id}</Link>
                                    </td>
                                    <td className="col-center">
                                        {isOngoing ? (
                                            <FontAwesomeIcon
                                                icon={faCheckCircle}
                                                title="Master mission is ongoing right now"
                                            />
                                        ) : null}
                                    </td>
                                    <td>
                                        <Link to={route}>{event.name}</Link>
                                    </td>
                                </tr>
                            );
                        })}
                    </tbody>
                </Table>

                {pageNavigator}
            </div>
        );
    }