Icon

視覚的な「手がかり」を提供

Example#

Name	Type	Default	Description
color optional	`'white'` `'black'` `'blue'`	`-`	色。指定しない場合はinheritとなり、親要素のcolorプロパティを継承します
data-* optional	`string`	`-`	Custom data attributes
icon required	`'ubie-iconsのアイコン名'`	`-`	アイコンの種類
id optional	`string`	`-`	ネイティブの`id`属性。ページで固有のIDを指定
label optional	`string`	`-`	アイコンが何を表すかを説明するテキスト単に装飾的なアイコンの場合は指定しない
size	`'xs'` `'sm'` `'md'`	`'md'`	サイズ xs=16px, sm=20px, md=24px, lg=28px, xl=32px, xxl=64px, xxxl=80px, xxxxl=104px 2xl、3xl、4xlはdeprecatedな指定となります

ユーザーの注目を引き、形から連想される意味によってユーザーの理解を助けることができます
@ubie-oss/ubie-iconsに存在するアイコンを使用できます
- @ubie-oss/ubie-iconsを単独で使う場合と比べスタイリングが容易です

アイコンのバリエーションはElements/Iconsを参照してください。

propを通して可能です。

<Icon icon="AlertIcon" color="red" />
<Icon icon="UbieIcon" size="2xl" />

色を指定しない場合は、親要素のcolorの影響を受けます。次の場合は、アイコンはprimaryカラーとなります。

<Color color="blue">
  <Icon icon="UbieIcon" /> Ubie Vitals
</Color>

基本的には、アイコンはテキストと併用して利用することを推奨します。アイコンの持つ意味が100%ユーザーに伝わるとは限りません。

単独で使用する場合は、label propにそのアイコンがどういった意味を持つかを記述してください。 labelを使わない場合、支援技術等からはアイコン自体がみえません¹ 。

<Icon icon="SetupIcon" label="設定" />

テキストと同様に、コントラストを確保し視覚的にアイコンを見やすくしましょう。特にアイコン単体で使うような場合、必ずコントラストを確保すべきです。アイコンが見づらいものである場合、その機能も果たせなくなっているはずです。

WCAG では隣接した色とのコントラスト比を 3:1 以上とすることを推奨しています。

参考: