图标组件

<Icon> 组件可在您的文档中显示 Font Awesome 图标，支持所有 Font Awesome Pro 样式。

用法

基本图标

Markdown

1 <Icon icon="seedling" /> 基本图标

变体

大小

大图标

Markdown

1 <Icon icon="warning" size="7" /> 大图标

颜色

彩色图标

Markdown

1 <div><Icon icon="check" color="#22C55E" /> 彩色图标</div>

Font Awesome 样式

 默认（实心）
 常规
 细
 超细
 双色
 尖锐实心
 品牌

Markdown

1 <Icon icon="heart" /> 默认（实心）
2 <Icon icon="fa-regular fa-heart" /> 常规
3 <Icon icon="fa-light fa-heart" /> 细
4 <Icon icon="fa-thin fa-heart" /> 超细
5 <Icon icon="fa-duotone fa-heart" /> 双色
6 <Icon icon="fa-sharp fa-solid fa-heart" /> 尖锐实心
7 <Icon icon="fa-brands fa-github" /> 品牌

自定义 SVG 图标

使用相对路径显示项目中的自定义 SVG 文件。

Markdown

1 <Icon icon="./images/fern-leaf.svg" /> 自定义 SVG 图标

属性

icon

stringRequired

Font Awesome 图标名称（例如：“heart” 或 “fa-solid fa-heart”）或 SVG 文件的相对路径（例如：”./images/icon.svg”）

color

string

图标颜色（十六进制、RGB 或颜色名称）。如果同时设置了 lightModeColor 和 darkModeColor，则忽略此属性

darkModeColor

string

深色模式下的图标颜色（十六进制、RGB 或颜色名称）

lightModeColor

string

浅色模式下的图标颜色（十六进制、RGB 或颜色名称）

size

numberDefaults to 4

图标的大小（宽度和高度），按 size * 4 像素计算（例如：4 = 16px，8 = 32px）。

className

string

应用于图标的额外 CSS 类

1	<Icon icon="heart" /> 默认（实心）
2	<Icon icon="fa-regular fa-heart" /> 常规
3	<Icon icon="fa-light fa-heart" /> 细
4	<Icon icon="fa-thin fa-heart" /> 超细
5	<Icon icon="fa-duotone fa-heart" /> 双色
6	<Icon icon="fa-sharp fa-solid fa-heart" /> 尖锐实心
7	<Icon icon="fa-brands fa-github" /> 品牌