Icon

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

使い方

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

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

React Iconsを使う

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

import { Icon } from "@yamada-ui/react"
import { FaRobot } from "react-icons/fa"
<Icon as={FaRobot} />

Lucide labを使う

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

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

Props

アクセシビリティ

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

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

ARIAロールと属性

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

類似のコンポーネント

Avatar

Avatarは、ユーザーを表すプロフィール写真やイニシャルのアイコンを表示するコンポーネントです。

Picture

Pictureは、picture要素を使用し、異なる表示やデバイスのシナリオに応じて代替の画像を提供するコンポーネントです。

Image

Imageは、画像を表示するコンポーネントです。

QrCode

QrCodeは、QRコードを表示するコンポーネントです。

IconButton

IconButtonは、ボタン内にアイコンを表示するコンポーネントです。

AspectRatio

AspectRatioは、アスペクト比を維持したビデオやマップなどを埋め込むためのコンポーネントです。

使用されているコンポーネント・フック

Accordion

Accordionは、情報を展開または折りたたんで表示するリストのコンポーネントです。

Alert

Alertは、ユーザーに情報を伝達するコンポーネントです。

Autocomplete

Autocompleteは、ユーザーのテキスト入力に応じて候補を表示するために使用されるコンポーネントです。

Avatar

Avatarは、ユーザーを表すプロフィール写真やイニシャルのアイコンを表示するコンポーネントです。

Blockquote

Blockquote は引用を表すコンポーネントです。デフォルトでは blockquote 要素をレンダリングします。

Breadcrumb

Breadcrumbは、ユーザーがウェブサイトの階層を理解するのに役立つコンポーネントです。

Calendar

Calendarは、日付を表示または選択するカレンダーのコンポーネントです。

Carousel

Carouselは、複数の要素をスライドショーのように表示するコンポーネントです。

Checkbox

Checkboxは、ユーザーが複数の選択肢の中から複数の値を選択するために使用されるコンポーネントです。

CheckboxCard

CheckboxCardは、ユーザーが複数の選択肢の中から複数の値を選択するために使用されるコンポーネントです。

CloseButton

CloseButtonは、基本的にコンポーネントの閉じる機能をトリガーするために使用するコンポーネントです。

ColorPicker

ColorPickerは、ユーザーが色を選択したり任意の色の値を入力するために使用されるコンポーネントです。

ColorSelector

ColorSelectorは、ユーザーが色を選択するために使用されるコンポーネントです。

DatePicker

DatePickerは、ユーザーが日付を選択するために使用されるコンポーネントです。

Loading

Loadingは、データの読み込み中などの待機時間に表示するコンポーネントです。

Menu

Menuは、一般的なドロップダウンメニューを表示するコンポーネントです。

NativeAccordion

NativeAccordionは、HTMLのdetails要素を使用して情報を展開または折りたたんで表示するリストのコンポーネントです。

NativeSelect

NativeSelectは、ユーザーがオプションのリストから1つの値を選択するために使用されるコンポーネントです。ブラウザ(ユーザーエージェント)によって提供されるネイティブなドロップダウンリストを表示します。

NumberInput

NumberInputは、ユーザーからの数値入力を取得するために使用されるコンポーネントです。

Pagination

Paginationは、コンテンツのページ分割とナビゲーションを管理するためのコンポーネントです。

PasswordInput

PasswordInputは、表示・非表示の切り替えができるパスワード入力用のコンポーネントです。

Rating

Ratingは、ユーザーが評価を行うために使用させるコンポーネントです。

Reorder

Reorderは、項目の順序をドラッグアンドドロップで変更できるコンポーネントです。

Select

Selectは、ユーザーがオプションのリストから値を選択するために使用されるコンポーネントです。

Stat

Statは、数値やデータをボックス内に表示するために使用されます。

Steps

Stepsは、複数のステップのプロセスの進行状況を表示するコンポーネントです。

Table

Tableは、列のソートや行の選択やクリックイベント機能を備えたテーブルのコンポーネントです。

Tag

Tagは、アイテムを説明するキーワードを使用して分類または整理するコンポーネントです。

Tip

Tipは、アイコンボタンをトリガーとして補足情報を表示するコンポーネントです。