Icon
Iconは、プロジェクトに使用できる一般的なアイコンコンポーネントです。
<GhostIcon />
使い方
import { GhostIcon } from "@yamada-ui/react"
import { GhostIcon } from "@/components/ui"
import { GhostIcon } from "@workspaces/ui"
<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"
<LucideIcon iconNode={burger} />
Props
アクセシビリティ
IconまたはLucideIconにaria-hidden={false}とaria-labelを設定すると、スクリーンリーダーによって読み上げられます。
<Icon as={FaRobot} aria-hidden={false} aria-label="ロボット" />
ARIAロールと属性
| コンポーネント | ロールと属性 | 使い方 |
|---|---|---|
Icon, LucideIcon | role="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は、アイコンボタンをトリガーとして補足情報を表示するコンポーネントです。