@fortawesome/free-solid-svg-icons#faHome 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
);

HomeButton: FunctionComponent = () => {
	function onClick(): void {
		postMessage({
			type: 'home',
		});
	}

	if (!inIframe) return null;

	return (
		<Button onClick={onClick}>
			<FontAwesomeIcon icon={faHome}/>
			&#32;
			Home
		</Button>
	);
}

TitleBar: React.FC = observer(function TitleBar() {
    const { navigation, identity, isWindows, isLinux } = useStores()
    const navigate = useNavigate()
    const location = useLocation()
    const isHomeActive = location.pathname.startsWith(locations.consumer)
    const isSettingsActive = location.pathname.startsWith(locations.settings)
    const isHelpActive = location.pathname.startsWith(locations.help)
    const isWalletActive = location.pathname.startsWith(locations.wallet)
    return (
        <Container>
            <NavigationButton active={isHomeActive} onClick={() => !isHomeActive && navigation.goHome()}>
                <FontAwesomeIcon icon={faHome} />
            </NavigationButton>
            <NavigationButton
                active={isSettingsActive}
                onClick={() => !isSettingsActive && navigate(locations.settings)}
            >
                Settings
            </NavigationButton>
            <NavigationButton active={isHelpActive} onClick={() => !isHelpActive && navigate(locations.help)}>
                Help
            </NavigationButton>
            <Location>
                <IP />
                <ProtectionStatus />
            </Location>
            <WalletButton active={isWalletActive} onClick={() => !isWalletActive && navigate(locations.wallet)}>
                <Money>
                    <IconMystToken color={isWalletActive ? "#fff" : greyBlue1} />
                    <span>
                        {displayTokens2(identity.identity?.balanceTokens)} {Currency.MYST}
                    </span>
                </Money>
            </WalletButton>
            {isWindows && <WindowButtonsWindows />}
            {isLinux && <WindowButtonsLinux />}
        </Container>
    )
})

Breadcrumbs = (props: BreadcrumbsProps) => {
    const homeLink = props.currentPageTitle !== "Home"
        && (
            <li className="breadcrumb-item">
                <Link to="/"><FontAwesomeIcon icon={faHome}/> Remote Office Hours Queue</Link>
            </li>
        );
    const intermediateCrumbs = props.intermediatePages?.map(ip => (
        <li className="breadcrumb-item" key={ip.href}>
            <Link to={ip.href}>{ip.title}</Link>
        </li>
    ));
    const current = props.currentPageTitle !== "Home"
        ? (
            <Breadcrumb.Item active>
                {props.currentPageTitle}
            </Breadcrumb.Item>
        )
        : (
            <Breadcrumb.Item active>
                <FontAwesomeIcon icon={faHome}/> Remote Office Hours Queue
            </Breadcrumb.Item>
        );
    return (
        <Breadcrumb>
            {homeLink}
            {intermediateCrumbs}
            {current}
        </Breadcrumb>
    );
}

library.add(faHome, faLock, faUser, faEnvelope, faPaperPlane, faEye, faEyeSlash);

homeIcon = faHome as IconProp;

export default function PageScanner(props: any) {
  const { t: ui } = useTranslation('ui')
  const { t } = useTranslation('page_scanner')
  ReactGA.send({ hitType: "pageview", page: '/scanner' })
  return <Box display="flex" flexDirection="column" gap={1} my={1}>
    <CardDark><CardContent>
      <Trans t={t} i18nKey="intro">
        <Typography variant="h5">Automatic Scanners</Typography>
        <Typography gutterBottom>Automatic Scanners are Genshin tools that can automatically scan in-game data by manipulating your mouse movements, taking screenshots of the game, and then scanning information from those screenshots. These are low-risk tools that can help you automate a lot of manual process with scanning artifacts for GO. As any tools that indirectly interact with the game, althought their usage is virtually undetectable, <Link href="https://genshin.mihoyo.com/en/news/detail/5763" target="_blank" rel="noreferrer">there could still be risk with using them.</Link> Users discretion is advised.
        </Typography>
        <Typography >The most important aspect of using these Scanners with GO is the output format:</Typography>
        <Typography gutterBottom component="div">
          <ul>
            <li>As of <code>v5.21.0</code>, GO can import artifact data in the <code>mona-uranai</code> format. </li>
            <li>As of <code>v6.0.0</code>, GO can import data in the <code>Genshin Open Object Description (GOOD)</code> format.</li>
          </ul>
        </Typography>
        <Typography gutterBottom>Below are several scanners that have been tested with GO.</Typography>
        <Typography>To upload the exported file, go to <Link component={RouterLink} to="/setting">Settings</Link> page, and upload your file in the <strong>Database Upload</strong> section.</Typography>
      </Trans>
    </CardContent></CardDark>

    <CardDark><CardContent><Grid container spacing={2} >
      <Grid item xs={12} md={4}><ImgFullwidth src={GIScanner} /></Grid>
      <Grid item xs={12} md={8}>
        <Typography variant="h5"><Trans t={t} i18nKey="ik.title">Inventory Kamera</Trans><SqBadge color="success" sx={{ ml: 1 }}><Trans t={ui} i18nKey="updatedfor" values={{ version: "2.6" }} /></SqBadge></Typography>
        <Typography gutterBottom><Trans t={t} i18nKey="ik.p1">This light-weight app will scan all your characters + weapons + artifacts in your inventory. Follow the instrutions in the app to set it up.</Trans></Typography>
        <Typography gutterBottom><Trans t={t} i18nKey="ik.p2">This scanner can also scan materials for <Link href="https://seelie.me/" target="_blank" rel="noreferrer">Seelie.me</Link></Trans></Typography>
        <Typography gutterBottom><Trans t={t} i18nKey="goodeng">This scanner only scans in english, and exports to GOOD format.</Trans></Typography>
        <Button href="https://github.com/Andrewthe13th/Inventory_Kamera" target="_blank" startIcon={<FontAwesomeIcon icon={faDownload} />} ><Trans t={ui} i18nKey="link.download" /></Button>
      </Grid>
    </Grid></CardContent></CardDark>

    <CardDark><CardContent><Grid container spacing={2} >
      <Grid item xs={12} md={8}>
        <Typography variant="h5"><Trans t={t} i18nKey="as.title">AdeptiScanner</Trans><SqBadge color="success" sx={{ ml: 1 }}><Trans t={ui} i18nKey="updatedfor" values={{ version: "2.6+" }} /></SqBadge></Typography>
        <Typography gutterBottom><Trans t={t} i18nKey="as.p1">Scans all your artifacts in inventory. Has a manual scanning mode.</Trans></Typography>
        <Typography gutterBottom><Trans t={t} i18nKey="as.p2">This scanner can also be configured for new artifacts in new game versions without needing an update.</Trans></Typography>
        <Typography gutterBottom><Trans t={t} i18nKey="goodeng">This scanner only scans in english, and exports to GOOD format.</Trans></Typography>
        <Button href="https://github.com/D1firehail/AdeptiScanner-GI" target="_blank" startIcon={<FontAwesomeIcon icon={faDownload} />} ><Trans t={ui} i18nKey="link.download" /></Button>
      </Grid>
      <Grid item xs={12} md={4}><ImgFullwidth src={AdScanner} /></Grid>
    </Grid></CardContent></CardDark>

    <CardDark><CardContent><Grid container spacing={2} >
      <Grid item xs={12} md={4}><ImgFullwidth src={Amenoma} /></Grid>
      <Grid item xs={12} md={8}>
        <Typography variant="h5"><Trans t={t} i18nKey="am.title">「天目」-- Amenoma</Trans><SqBadge color="success" sx={{ ml: 1 }}><Trans t={ui} i18nKey="updatedfor" values={{ version: "2.6" }} /></SqBadge></Typography>
        <Typography gutterBottom><Trans t={t} i18nKey="am.p1">Scans all you artifacts in your inventory. Follow the instruction to capture the window and scan. Has both Chinese and English version. (Download the <code>_EN.exe</code> version to scan in english). Both the <code>mona-uranai</code> and <code>GOOD</code> format is accepted in GO. the <code>GOOD</code> format is recommended.</Trans></Typography>
        <Typography gutterBottom><Trans t={t} i18nKey="am.p2">Beta version of this scanner can also scan materials for <Link href="https://seelie.me/" target="_blank" rel="noreferrer">Seelie.me</Link></Trans></Typography>
        <Button sx={{ mb: 2 }} href="https://github.com/daydreaming666/Amenoma" target="_blank" startIcon={<FontAwesomeIcon icon={faDownload} />} ><Trans t={ui} i18nKey="link.download" /></Button>
        <Typography gutterBottom><Trans t={t} i18nKey="am.p3">Please feel free to join their discord if you find any bugs. They are in need of more english testers.</Trans></Typography>
        <Button href="https://discord.gg/BTrCYgVGFP" target="_blank" startIcon={<FontAwesomeIcon icon={faDiscord} />} ><Trans t={ui} i18nKey="link.discord" /></Button>
      </Grid>
    </Grid></CardContent></CardDark>

    <CardDark><CardContent>
      <Button component={RouterLink} to="/" startIcon={<FontAwesomeIcon icon={faHome} />}><Trans t={t} i18nKey="backHome">Go back to home page</Trans></Button>
    </CardContent></CardDark>
  </Box >
}

fontAwesomeSolidIcons = {
    faAngleDown,
    faAngleRight,
    faArrowLeft,
    faBars,
    faBookOpen,
    faChartArea,
    faChartBar,
    faChartPie,
    faChevronDown,
    faChevronUp,
    faColumns,
    faSearch,
    faTable,
    faTachometerAlt,
    faUser,
    faExclamationTriangle,
    faSignOutAlt,
    faCalendarAlt,
    faCogs,
    faClipboardList,
    faHammer,
    faTools,
    faSync,
    faLock,
    faLockOpen,
    faTrash,
    faPlusCircle,
    faSpinner,
    faMap,
    faAnchor,
    faCity,
    faChessRook,
    faMountain,
    faCampground,
    faHome,
    faUniversity,
    faCrosshairs,
    faPlane,
    faWrench,
}

export default function TopBar({ socket }: Props): JSX.Element {
    const [editPartyOverlay, setEditPartyOverlay] = useState(false);
    const [redirect, setRedirect] = useState<'home' | ''>('');

    const user = useSelector((state: RootAppState) => state.globalState.user);
    const party = useSelector((state: RootAppState) => state.globalState.party);
    const uiVisible = useSelector(
        (state: RootAppState) => state.globalState.uiVisible
    );

    const { t } = useTranslation();

    if (party && redirect !== '') {
        if (redirect === 'home' && socket) {
            return <Navigate to="/"></Navigate>;
        }
    }

    return (
        <div className="absolute left-0 top-0 w-screen flex flex-row z-50 textShadow">
            <div className="flex-1">
                <TitleDisplay></TitleDisplay>
            </div>
            <div className="flex flex-1">
                {uiVisible && party && user && (
                    <div className="mx-auto flex flex-row">
                        <div
                            className="p-1 hover:text-gray-100 cursor-pointer mr-3"
                            onClick={(): void => setRedirect('home')}
                        >
                            <FontAwesomeIcon
                                className="iconShadow"
                                title={t('player.backToDashboardTitle')}
                                icon={faHome}
                            ></FontAwesomeIcon>
                        </div>
                        <span
                            className={
                                'mr-3 mt-1' +
                                (user.role === 'admin' ? ' cursor-pointer' : '')
                            }
                            onClick={(): void => {
                                user.role === 'admin' &&
                                    setEditPartyOverlay(true);
                            }}
                            title={t('player.goToPartyTitle')}
                        >
                            {party.name}
                        </span>
                        {party.status === 'stopped' && (
                            <span className="my-auto pt-1 text-xs text-red-600">
                                {party.status}
                            </span>
                        )}
                    </div>
                )}
            </div>
            <div className="flex flex-1">
                <div className="ml-auto">
                    <Avatars></Avatars>
                </div>
            </div>
            {editPartyOverlay && party && user && socket && (
                <AdminActionOverlay
                    heading={`${t('common.party')}: ${party.name}`}
                    onClose={(): void => setEditPartyOverlay(false)}
                >
                    <EditParty
                        party={party}
                        user={user}
                        socket={socket}
                    ></EditParty>
                </AdminActionOverlay>
            )}
        </div>
    );
}

library.add(faHome, faRss, faTags, faTwitter, faGithub)