Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

アイコン

最終更新 Markdown で表示Agent セットアップ

2 つのアイコンコンポーネントがあり、それぞれ別のアイコンセットを参照します。

Icon

Nimbus の Icon コンポーネントは、単体のコンポーネントとして使えます。

主に、/src/icons/*.svg に置かれている Cloudflare のプロダクトアイコンに使います。

import { Icon } from "~/components";

<Icon name="workers" class="text-5xl text-orange-400" />

Card と LinkCard

CardLinkCard などのコンポーネントは、プレーンな 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 名を直接使ってください。

アイコンライブラリ

任意で、cards or tabs に対応するアイコンを Starlight の Icons から選べます。

役に立ちましたか?