hextra_mirror/exampleSite/content/docs/guide/shortcodes/icon.zh-cn.md

title, next

title	next
图标	/docs/guide/shortcodes/steps

要在行内使用此短代码，需在配置中启用行内短代码功能：

enableInlineShortcodes: true

可用图标列表可在 data/icons.yaml 中找到。

示例

{{< icon "academic-cap" >}} {{< icon "cake" >}} {{< icon "gift" >}} {{< icon "sparkles" >}}

使用方法

{{</* icon "github" */>}}

默认支持 Heroicons v1 轮廓风格图标。

如何添加自定义图标

创建 data/icons.yaml 文件，按以下格式添加您的 SVG 图标：

your-icon: <svg>您的图标 SVG 内容</svg>

随后即可通过短代码调用：

{{</* icon "your-icon" */>}}

{{</* card icon="your-icon" */>}}

提示：Iconify Design 是寻找网站 SVG 图标的优质资源平台。

选项

范围	描述
name	图标名称
attributes	图标的属性。