Writing contentComponents

Icon

The <Icon> component displays Font Awesome icons in your documentation with support for all Font Awesome Pro styles.

Usage

Basic icon
Markdown
1<Icon icon="seedling" /> Basic icon

Variants

Sizes

Large icon
Markdown
1<Icon icon="warning" size="7" /> Large icon

Colors

Colored icon
Markdown
1<div><Icon icon="check" color="#22C55E" /> Colored icon</div>

Font Awesome styles

Default (Solid)
Regular
Light
Thin
Duotone
Sharp Solid
Brands
Markdown
1<Icon icon="heart" /> Default (Solid)
2<Icon icon="fa-regular fa-heart" /> Regular
3<Icon icon="fa-light fa-heart" /> Light
4<Icon icon="fa-thin fa-heart" /> Thin
5<Icon icon="fa-duotone fa-heart" /> Duotone
6<Icon icon="fa-sharp fa-solid fa-heart" /> Sharp Solid
7<Icon icon="fa-brands fa-github" /> Brands

Properties

icon
stringRequired

Name of the Font Awesome icon (e.g., “heart” or “fa-solid fa-heart”)

color
string

Icon color (hex, RGB, or color name)

size
number

Size in 0.25rem increments (e.g., 4 = 1rem)