Skip to content

docs: add inline documentation for CustomPrefixProvider #599

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 3, 2025
Merged

docs: add inline documentation for CustomPrefixProvider #599

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions src/components/rsc/CustomPrefixProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,47 @@ interface CustomPrefixProviderProps {
customPrefix: string
}

/**
* React component that provides a custom CSS prefix for Font Awesome icons.
*
* Use this if your React application uses server-side rendering (e.g. NextJS, Vite/Remix, Astro, etc.)
* to ensure the `cssPrefix` is set correctly in the client-side prior to hydration.
*
* To ensure this works correctly, be sure to render this provider at the top level of your application.
* It has been built with `"use client"` but not as a typical provider that would wrap the application.
* This means you don't have to worry about turning your whole application into a client component when using this provider
* at the top level.
*
* @example
* ```tsx
* // In Next.js App Router - `app/layout.tsx`
* import '@fortawesome/fontawesome-svg-core/styles.css'
* import { config } from '@fortawesome/fontawesome-svg-core'
* import { CustomPrefixProvider } from '@fortawesome/react-fontawesome/components/rsc/CustomPrefixProvider'
*
* const CUSTOM_FA_CSS_PREFIX = 'my-custom-prefix'
*
* config.autoAddCss = false
* // First set the prefix here so it is used during server-side rendering
* config.cssPrefix = CUSTOM_FA_CSS_PREFIX
*
* export default function RootLayout({ children }) {
* return (
* <html>
* {
* // Render the component in isolation before the opening <body> tag
* }
* <CustomPrefixProvider customPrefix={CUSTOM_FA_CSS_PREFIX} />
* <body>
* {children}
* </body>
* </html>
* )
* }
* ```
*
* @returns null - This is a "void" component used purely for side effects.
*/
export const CustomPrefixProvider = ({
customPrefix,
}: CustomPrefixProviderProps): null => {
Expand Down