npm i --save @fortawesome/react-fontawesome@latest
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
Import
---
import "@fortawesome/fontawesome-svg-core/styles.css";
import { config } from "@fortawesome/fontawesome-svg-core";
type Props = {
cssVariables?: string | null;
title: string;
description: string;
};
config.autoAddCss = false;
const { cssVariables, title, description } = Astro.props as Props;
---
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" href="/favicon.ico" />
<meta name="generator" content={Astro.generator} />
<meta name="description" content={description} />
<title>{title}</title>
{cssVariables && <style set:html={`:root {${cssVariables}}`} />}
</head>
Use in component
---
import { joinClasses } from "../utils/joinClasses";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
type Props = {
classes?: string;
styles?: string;
label?: string;
url?: string;
};
const { classes = "", styles, label, url } = Astro.props as Props;
const rootClasses = "group relative";
const submenuClasses =
joinClasses(
"hidden group-hover:block absolute top-full left-0 w-40 whitespace-nowrap bg-event-horizon p-4",
classes,
) || undefined;
const normalizedStyles = styles?.trim() || undefined;
---
<li class={rootClasses}>
<a class="py-2 block" href={url}
>{label} <FontAwesomeIcon icon={faChevronDown} /></a
>
<ul class={submenuClasses} style={normalizedStyles}>
<slot />
</ul>
</li>