Icon
Iconコンポーネントは、アイデアやアクションを表すための視覚的な要素です。
一目でメッセージを伝え、重要な情報への注意を促します。適切なアイコンは認知を手助けします。
使用上の注意
SmartHRプロダクトのアイコンは、Font Awesome別タブで開くを使っています。アイコンのデザインコンセプトはFont Awesomeの公式サイト別タブで開くを確認してください。
SmartHR UIでは、React Icons別タブで開くを通してFont Awesomeのライブラリを利用しています。
Font Awesomeアイコンはプロダクトに必要なアイコンのみインポートしています。新たに追加したい場合は、新たにインポートしたいアイコンを追加し、プロジェクト別タブで開くにPull Requestを出してください。
種類
Font Awesomeから必要なものを取り込んでいます。
実際に登録されてるアイコンは、Storybook別タブで開くを確認してください。
状態
アイコンの色は、使う場所のテキストの色に準拠します。SmartHR UIではcolorを指定せず、使われているコンポーネントの色の指定に従います。
アクセシビリティ
装飾以外の目的でアイコンを使用する場合、 alt propsに適切な代替テキストを付与してください。
適切な代替テキストの判断は、SmartHR alt ディシジョンツリーを参考にしてください。
代替テキストが必要なアイコンの例
| 代替テキスト | 表示例 | 理由 |
|---|---|---|
右矢印 | Smarthr右矢印SmartHR | アイコンによって、左の状態から右の状態に変化していることを示しているため。 矢印 のみでは変化の方向がわからない |
調整済みまたは編集可能 |
| 編集可能または調整済みなことをアイコンのみで示しているため |
削除 | チップ | アイコンのみでチップが削除可能なことを示しているため |
追加 | ボタンのテキストがなくアイコンのみで表現しているため |
代替テキストが必要ないアイコンの例
| 使われ方・用途 | 表示例 | 理由 |
|---|---|---|
| 追加ボタン | テキストのみで追加操作をすることがわかるため | |
| デフォルトのアバター | ユーザーがプロフィール画像を設定していないという情報を示すため |
デザインパターン
以下のコンポーネントでアイコンを利用する際は、それぞれのコンポーネントでの利用方法を参照してください。
参考文献
- https://www.lightningdesignsystem.com/icons/別タブで開く
- https://www.carbondesignsystem.com/guidelines/icons/usage/別タブで開く
Props
アイコンの大きさ（フォントサイズの抽象値） @deprecated 親要素やデフォルトフォントサイズが継承されるため固定値の指定は非推奨
アイコンの色
アイコンの説明テキスト
アイコンと並べるテキスト
アイコンと並べるテキストとの溝
true のとき、アイコンを右側に表示する