mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
5976d9dcd4
* docs: document src prop on Icon component * Update snippets/icons-required.mdx --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
56 lines
1.6 KiB
Plaintext
56 lines
1.6 KiB
Plaintext
---
|
|
title: "图标"
|
|
description: "使用图标组件将 Font Awesome、Lucide、Tabler 或自定义来源的图标添加到文档页面，支持尺寸和颜色选项。"
|
|
keywords: ["Font Awesome", "Lucide", "Tabler", "SVGs"]
|
|
boost: 3
|
|
---
|
|
|
|
import IconsRequired from "/snippets/zh/icons-required.mdx";
|
|
|
|
使用来自 Font Awesome、Lucide、Tabler、SVG、外部 URL 或项目文件的图标，丰富你的文档。
|
|
|
|
<Icon icon="flag" size={32} />
|
|
|
|
```mdx Icon example
|
|
<Icon icon="flag" size={32} />
|
|
```
|
|
|
|
## 自定义图像图标
|
|
|
|
使用 `src` 属性将自定义图像显示为图标。该图像可以是项目中的文件，也可以是外部托管的 URL。
|
|
|
|
```mdx Custom image icon examples
|
|
<Icon src="/images/my-icon.svg" />
|
|
|
|
<Icon src="https://example.com/icon.png" />
|
|
```
|
|
|
|
|
|
<div id="inline-icons">
|
|
## 行内图标
|
|
</div>
|
|
|
|
当在句子、段落或标题中使用时，图标会以内联形式呈现。 <Icon icon="flag" iconType="solid" /> 你可以将图标用于装饰，或用于强化视觉重点。
|
|
|
|
```markdown Inline icon example
|
|
图标在句子、段落或标题中使用时会内联显示。<Icon icon="flag" iconType="solid" /> 使用图标可以起到装饰作用或增强视觉效果。
|
|
```
|
|
|
|
|
|
<div id="properties">
|
|
## 属性
|
|
</div>
|
|
|
|
<IconsRequired />
|
|
|
|
<ResponseField name="color" type="string">
|
|
icon 的颜色，使用十六进制色值（例如 `#FF5733`）。
|
|
</ResponseField>
|
|
|
|
<ResponseField name="size" type="number">
|
|
icon 的尺寸（像素）。
|
|
</ResponseField>
|
|
|
|
<ResponseField name="className" type="string">
|
|
应用于 icon 的自定义 CSS 类名。
|
|
</ResponseField> |