编写内容组件

图标组件

以 Markdown 格式查看

<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 类