跳转到主要内容
使用来自 Font Awesome、Lucide、SVG、外部 URL 或项目中文件的图标来增强你的文档。
Icon example
<Icon icon="flag" size={32} />

​
行内图标

当在段落中使用时，图标将以内联形式呈现。 轻松获得你想要的文档。
Inline example
<Icon icon="flag" iconType="solid" /> 您想要的文档，轻松搞定。

​
属性

​
icon
string
required
要显示的 icon。选项：
  • Font Awesome icon 名称
  • Lucide icon 名称
  • 用花括号包裹的、与 JSX 兼容的 SVG 代码
  • 指向外部托管 icon 的 URL
  • 项目中 icon 文件的路径
针对自定义 SVG 图标：
  1. 使用 SVGR converter 将你的 SVG 进行转换。
  2. 将 SVG 代码粘贴到 SVG 输入框。
  3. 从 JSX 输出框复制完整的 <svg>...</svg> 元素。
  4. 用花括号包裹与 JSX 兼容的 SVG 代码：icon={<svg ...> ... </svg>}。
  5. 按需调整 height 和 width。
​
iconType
string
Font Awesome 的 icon 样式。仅在使用 Font Awesome 图标时使用。选项：regular、solid、light、thin、sharp-solid、duotone、brands。
​
color
string
icon 的颜色，使用十六进制色值（例如 #FF5733）。
​
size
number
icon 的大小（像素）。
⌘I