Icon

Iconは、プロジェクトに使用できる一般的なアイコンコンポーネントです。

<GhostIcon />

使い方

import { GhostIcon } from "@yamada-ui/react"

import { GhostIcon } from "@/components/ui"

import { GhostIcon } from "@workspaces/ui"

<GhostIcon />

こちらから提供しているすべてのアイコンを探すことができます。

React Iconsを使う場合は、asにコンポーネントをセットします。

import { Icon } from "@yamada-ui/react"
import { FaRobot } from "react-icons/fa"

<Icon as={FaRobot} />

Lucide labのアイコンを使う場合は、LucideIconを使用します。

import { LucideIcon } from "@yamada-ui/react"

<LucideIcon iconNode={burger} />

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`iconNode`	-	`IconNode` The icon of the Lucide lab.

IconまたはLucideIconにaria-hidden={false}とaria-labelを設定すると、スクリーンリーダーによって読み上げられます。

<Icon as={FaRobot} aria-hidden={false} aria-label="ロボット" />

コンポーネント	ロールと属性	使い方
`Icon`, `LucideIcon`	`role="img"`	画像であることを示します。
	`aria-hidden`	要素をアクセシビリティツリーから除外します。