图标

从本地文件或 Iconify 图标集渲染 SVG 图标。

安装

import Icon from "@cloudflare/nimbus-docs/components/Icon.astro";

预览

<Icon name="ph:rocket-launch" class="w-6 h-6" />
<Icon name="ph:github-logo" class="w-6 h-6" />
<Icon name="ph:book-open" class="w-6 h-6" />

示例

尺寸

使用 size 设置等宽等高，或分别使用 width/height。也可以使用元素上的 Tailwind 工具类来控制尺寸。

<Icon name="ph:star" size={16} />
<Icon name="ph:star" size={24} />
<Icon name="ph:star" size={32} />

无障碍

传入 title 和 desc 可在 SVG 内部添加 <title> 和 <desc> 元素，供屏幕阅读器使用。

<Icon name="ph:warning" title="警告" desc="此操作无法撤销" class="w-6 h-6" />

配合 Tailwind 类

<svg> 元素上的任何类都可以使用——颜色、尺寸、过渡效果等。

<Icon name="ph:heart" class="w-8 h-8 text-red-500 hover:scale-110 transition-transform" />

Iconify 图标集

安装任意 @iconify-json/* 包，然后使用其前缀引用图标。图标系统会自动检测已安装的包。

npm install @iconify-json/ph         # Phosphor — ph:*
npm install @iconify-json/mdi        # Material Design Icons — mdi:*
npm install @iconify-json/fa6-solid  # Font Awesome 6 — fa6-solid:*
npm install @iconify-json/heroicons  # Heroicons — heroicons:*

<Icon name="ph:rocket-launch" class="w-6 h-6" />
<Icon name="ph:github-logo" class="w-6 h-6" />
<Icon name="ph:warning" class="w-6 h-6" />
<Icon name="ph:check-circle" class="w-6 h-6" />

本地 SVG

将 SVG 文件放在 src/icons/ 目录下，通过文件名引用（不带前缀和扩展名）。

src/icons/logo.svg
src/icons/product/workers.svg

<Icon name="logo" class="w-6 h-6" />
<Icon name="product/workers" class="w-6 h-6" />

单色 SVG 会自动归一化为 currentColor，使其通过 CSS 继承文本颜色。

API 参考

组件接受的全部属性，均源自单一声明。

Prop	Type
`name`required	`string`
`size`	`number \| string`
`width`	`number \| string`
`height`	`number \| string`
`is:inline`	`boolean`
`title`	`string`
`desc`	`string`