有两个图标组件,它们从两个不同的图标集拉取信息。
astro-icon 包可以作为独立组件使用。
这主要用于存储在 /src/icons/*.svg 中的 Cloudflare 产品图标。
import { AstroIcon } from "~/components";
<AstroIcon name="workers" class="text-5xl text-orange-400" />Card 和 LinkCard 等组件接受一个纯文本 icon 字符串属性——即任何 iconify ↗ 图标名称。
import { Card, LinkCard } from "~/components";
<Card title="Example" icon="ph:rocket-launch" />
<LinkCard title="Example" href="/workers/" icon="ph:rocket-launch" />在 Nimbus 迁移之前创作的内容可能仍会使用 Starlight 风格的图标名称(例如 icon="ph:terminal-window")。这些在构建时会自动映射到等效的 iconify 图标。新内容应直接使用 iconify 名称。
(可选)您可以从 Starlight 的 Icons ↗ 中为 cards or tabs 选择一个对应的图标。