Icon

Iconコンポーネントは、アイデアやアクションを表すための視覚的な要素です。
一目でメッセージを伝え、重要な情報への注意を促します。適切なアイコンは認知を手助けします。

使用上の注意

SmartHRプロダクトのアイコンは、Font Awesome別タブで開くを使っています。アイコンのデザインコンセプトはFont Awesomeの公式サイト別タブで開くを確認してください。

SmartHR UIでは、React Icons別タブで開くを通してFont Awesomeのライブラリを利用しています。

Font Awesomeアイコンはプロダクトに必要なアイコンのみインポートしています。新たに追加したい場合は、新たにインポートしたいアイコンを追加し、プロジェクト別タブで開くにPull Requestを出してください。

種類

Font Awesomeから必要なものを取り込んでいます。

実際に登録されてるアイコンは、Storybook別タブで開くを確認してください。

状態

アイコンの色は、使う場所のテキストの色に準拠します。SmartHR UIではcolorを指定せず、使われているコンポーネントの色の指定に従います。

アクセシビリティ

アイコンのみ表示する場合、ラベルと合わせて使うよりも認知負荷を与えます。適切なラベルを付与してください。特にリンクやボタンにアイコンのみ表示する場合は必須です。

また、アイコンの色と背景色のコントラスト比は最低でも 3:1 以上を確保してください。

デザインパターン

以下のコンポーネントでアイコンを利用する際は、それぞれのコンポーネントでの利用方法を参照してください。

• Button
• TextLink

参考文献

• https://www.lightningdesignsystem.com/icons/別タブで開く
• https://www.carbondesignsystem.com/guidelines/icons/usage/別タブで開く

Props