Icon

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

SmartHR UI v12.1.1 ・ Storybook

SmartHR UIではIconです。

アイコンを使う際の注意

アイコンは、情報の認知の手助けとして使ってください。アイコンのみで利用する場合、ラベルと合わせて使うよりも認知不可を与えます。利用場面を十分に検討して使ってください。

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

<PrimaryButton>
  <FaPlusCircleIcon visuallyHiddenText="追加する" />
</PrimaryButton>

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

SmartHRプロダクトのアイコンは、Font Awesomeを使っています。アイコンのデザインコンセプトはFont Awesomeの公式サイトを確認してください。 SmartHR UIでは、React Iconsを通してFont Awesomeのライブラリを利用しています。

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

Font Awesomeのアイコンをすべて網羅したものではありません。ここではSketchファイルに登録されているアイコンの一部を例として表示しています。

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

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

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

使用箇所	設置するアイコン	備考
新規タブまたは新規ウィンドウで開くテキストリンク	テキストの後ろに`fa-external-link`を設置	リンク先がSmartHRの内部ページ、外部サイトに関わらず付与します。
ヘルプセンターのモーダルダイアログを開くテキストリンク	テキストの後ろに`fa-question-circle`を設置