Icon

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

SmartHR UIではIconです。

アイコンを使う際の注意

アイコンは、情報の認知の手助けとして使ってください。

アイコンのみ表示する場合、ラベルと合わせて使うよりも認知負荷を与えます。十分に検討して使ってください。

アクセシビリティ

アイコンのみ表示する場合、適切なラベルを付与してください。特にリンクやボタンにアイコンのみ表示する場合は必須です。

<Button variant="primary" square>
  <FaPlusCircleIcon visuallyHiddenText="追加" />
</Button>
<Button variant="primary" square>
  <FaPlusCircleIcon visuallyHiddenText="追加" />
</Button>

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

アイコンの参照元

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

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

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

種類

Font Awesomeのアイコンをすべて網羅したものではありません。

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

<>
  <FaAddressBookIcon />
  <FaAddressCardIcon />
  <FaAngleDoubleDownIcon />
  <FaAngleDoubleLeftIcon />
  <FaAngleDoubleRightIcon />
</>
<>
  <FaAddressBookIcon />
  <FaAddressCardIcon />
  <FaAngleDoubleDownIcon />
  <FaAngleDoubleLeftIcon />
  <FaAngleDoubleRightIcon />
</>

状態

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

使い方

特定のテキストリンクを表す場合は、以下のアイコンを装飾として使います。これはリンクされるテキストが異なっていても、クリック時に同じ挙動になることを示すためです。

参考文献

• https://www.lightningdesignsystem.com/icons/
• https://www.carbondesignsystem.com/guidelines/icons/usage/

Props