Icon

fandhe-frontend-pre-styled-ui の icon mod が提供するスタイル済み Icon 部品です。

SVG アイコンを表示する部品です。label を指定すると role="img" + aria-label で意味のあるアイコンとして扱われ、未指定（既定）なら装飾用途として aria-hidden="true" が付与されます。fill="currentColor" を固定付与するため祖先の color プロパティで着色します。size は Xs〜Xl の 5 段（既定 Md）で、chakra-ui 同名段の実寸に整合しています。

Demo

インライン SVG の寸法（size は Xs〜Xl の 5 段、既定 Md、chakra-ui 同名段の実寸に整合。イシュー #1561）・配色（color: currentColor 継承）を統一する svg ラッパー。SVG 本体（path 等）は呼び出し側がノード木 API で構築します。

Size

Features

label が Some のとき role="img" + aria-label を付与し意味のあるアイコンとして扱う（icon.rs icon 節）
label が None（既定）のとき装飾用途とみなし aria-hidden="true" を付与する（icon.rs icon 節）
fill="currentColor" を固定付与し祖先の color プロパティで着色する（icon.rs icon 節）

Anatomy

root

API Reference

Arguments

Name	Type	Default	Description
`size`	`Size`	`Md`	サイズ（Xs〜Xl の 5 段、chakra-ui 同名段の実寸に整合。イシュー #1561）。
`label`	`Option<&str>`	`None`	アクセシブルネーム（icon.rs `IconProps` 節）。
`view_box`	`&str`	`"0 0 24 24"`	viewBox 属性値（icon.rs `IconProps` 節）。

Examples

Labelled

label="Search" を指定し role="img" として扱う例です。

Accessibility

WAI-ARIA

Attribute	Description
role="img" + aria-label（label が Some の場合）/ aria-hidden="true"（None の場合）	label の有無で意味のあるアイコンか装飾用途かを切り替える（icon.rs `icon` 節）。