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 以上を確保してください。
デザインパターン
特別なテキストリンク
特定のテキストリンクを表す場合は、以下のアイコンを装飾として使います。これはリンクされるテキストが異なっていても、クリック時に同じ挙動になることを示すためです。
| 使用箇所 | 設置するアイコン | 備考 |
|---|---|---|
| 新規ウィンドウで開くテキストリンク | テキストの右側に 新規ウィンドウ アイコン（FaExternalLinkAltIcon）を配置（必須） | リンク先がSmartHRの内部ページ、外部サイトに関わらず新規ウィンドウ（新規タブ）で開く場合は表示します。 |
| ヘルプセンターを開くテキストリンク | テキストの左側に ヘルプセンター アイコン（FaQuestionCircleIcon）を配置（推奨） | 詳細はヘルプページへの動線を参照してください。 |
参考文献
- https://www.lightningdesignsystem.com/icons/
- https://www.carbondesignsystem.com/guidelines/icons/usage/
Props
アイコンの説明テキスト
アイコンと並べるテキスト
アイコンと並べるテキストとの溝
true のとき、アイコンを右側に表示する
コンポーネントに適用するクラス名
アイコンの色
アイコンの大きさ（フォントサイズの抽象値） @deprecated 親要素やデフォルトフォントサイズが継承されるため固定値の指定は非推奨