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

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

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

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

        const servants = this.servants(),
            hasPaginator = servants.length > this.state.perPage,
            results = servants.slice(this.state.perPage * this.state.page, this.state.perPage * (this.state.page + 1));

        return (
            <div id="servants" className="listing-page">
                <Row>
                    <Col md={12} lg="auto" id="class-name">
                        {normalClasses.map((className) => {
                            const active = this.isClassFilterActive(className);
                            return (
                                <span
                                    key={className}
                                    className={"filter"}
                                    style={{ opacity: active ? 1 : 0.5 }}
                                    onClick={(ev: MouseEvent) => {
                                        this.toggleClassFilter(className);
                                    }}
                                >
                                    <ClassIcon height={37} rarity={active ? 5 : 3} className={className} />
                                </span>
                            );
                        })}
                        <div className={"d-block d-lg-none"} style={{ flexBasis: "100%", height: 0 }}></div>
                        {extraClasses.map((className) => {
                            const active = this.isClassFilterActive(className);
                            return (
                                <span
                                    key={className}
                                    className={"filter"}
                                    style={{ opacity: active ? 1 : 0.5 }}
                                    onClick={(ev: MouseEvent) => {
                                        this.toggleClassFilter(className);
                                    }}
                                >
                                    <ClassIcon height={37} rarity={active ? 5 : 3} className={className} />
                                </span>
                            );
                        })}
                    </Col>
                    <Col sm={12} lg={3} id="servant-search">
                        <Form>
                            <Form.Control
                                placeholder={"Search"}
                                value={this.state.search ?? ""}
                                onChange={(ev: ChangeEvent) => {
                                    this.setState({ search: ev.target.value });
                                }}
                            />
                        </Form>
                    </Col>
                </Row>
                <Row>
                    <Col sm={12} md={6} lg={5} id="servant-rarity">
                        <ButtonGroup>
                            {[...new Set(this.state.servants.map((s) => s.rarity))]
                                // deduplicate star counts
                                .sort((a, b) => a - b)
                                // sort
                                .map((rarity) => (
                                    <Button
                                        variant={
                                            this.state.activeRarityFilters.includes(rarity) ? "success" : "outline-dark"
                                        }
                                        key={rarity}
                                        onClick={(ev: MouseEvent) => this.toggleRarityFilter(rarity)}
                                    >
                                        {rarity} ★
                                    </Button>
                                ))}
                        </ButtonGroup>
                    </Col>
                    <Col sm={12} md={6} lg={7}>
                        {this.paginator(servants.length)}
                    </Col>
                </Row>
                <hr />

                <Table striped bordered hover responsive>
                    <thead>
                        <tr>
                            <th className="col-center text-nowrap">
                                <Button
                                    variant=""
                                    className="py-0 px-2 border-0 align-bottom"
                                    onClick={() => {
                                        this.setState({
                                            sortKey: this.state.sortKey === "collectionNo" ? "id" : "collectionNo",
                                        });
                                    }}
                                >
                                    {this.state.sortKey === "collectionNo" ? (
                                        <FontAwesomeIcon icon={faHashtag} title="Collection No" />
                                    ) : (
                                        <FontAwesomeIcon icon={faKey} title="Servant ID" />
                                    )}
                                </Button>
                                <Button
                                    variant=""
                                    className="py-0 px-2 border-0 align-bottom"
                                    onClick={() => {
                                        this.setState({
                                            sortDirection:
                                                this.state.sortDirection === "ascending" ? "descending" : "ascending",
                                        });
                                    }}
                                >
                                    {this.state.sortDirection === "ascending" ? (
                                        <FontAwesomeIcon icon={faArrowDown19} title="Ascending" />
                                    ) : (
                                        <FontAwesomeIcon icon={faArrowDown91} title="Descending" />
                                    )}
                                </Button>
                            </th>
                            <th className="col-center">Class</th>
                            <th className="col-center">Thumbnail</th>
                            <th>Name</th>
                            <th className="rarity-col">Rarity</th>
                        </tr>
                    </thead>
                    <tbody>
                        {results.map((servant) => {
                            const route = `/${this.props.region}/servant/${servant.collectionNo}`;

                            return (
                                <tr key={servant.id}>
                                    <td className="col-center">
                                        <Link to={route}>
                                            {servant.collectionNo} (
                                            <span className="listing-svtId" lang="en-US">
                                                {servant.id}
                                            </span>
                                            )
                                        </Link>
                                    </td>
                                    <td className="col-center">
                                        <ClassIcon className={servant.className} rarity={servant.rarity} height={50} />
                                    </td>
                                    <td className="col-center">
                                        <Link to={route}>
                                            <img
                                                src={servant.face}
                                                alt={`${servant.name} face icon`}
                                                width={50}
                                                height={50}
                                            />
                                        </Link>
                                    </td>
                                    <td style={{ whiteSpace: Manager.showingJapaneseText() ? "nowrap" : "normal" }}>
                                        <Link to={route}>{servant.name}</Link>
                                    </td>
                                    <td className="rarity-col">
                                        <RarityDescriptor rarity={servant.rarity} />
                                    </td>
                                </tr>
                            );
                        })}
                    </tbody>
                </Table>

                {hasPaginator ? this.paginator(servants.length) : undefined}
            </div>
        );
    }