Icon
- SmartHR UI v21.4.5
- Storybook
- ソースコード(GitHub)
Iconコンポーネントは、アイデアやアクションを表すための視覚的な要素です。
一目でメッセージを伝え、重要な情報への注意を促します。
SmartHR UIではIcon
です。
アイコンを使う際の注意
アイコンは、情報の認知の手助けとして使ってください。
アイコンのみ表示する場合、ラベルと合わせて使うよりも認知負荷を与えます。十分に検討して使ってください。
アクセシビリティ
アイコンのみ表示する場合、適切なラベルを付与してください。特にリンクやボタンにアイコンのみ表示する場合は必須です。
また、アイコンの色と背景色のコントラスト比は最低でも 3:1
以上を確保してください。
アイコンの参照元
SmartHRプロダクトのアイコンは、Font Awesomeを使っています。アイコンのデザインコンセプトはFont Awesomeの公式サイトを確認してください。
SmartHR UIでは、React Iconsを通してFont Awesomeのライブラリを利用しています。
Font Awesomeアイコンはプロダクトに必要なアイコンのみインポートしています。新たに追加したい場合は、新たにインポートしたいアイコンを追加し、プロジェクトにPull Requestを出してください。
種類
Font Awesomeのアイコンをすべて網羅したものではありません。
実際に登録されてるアイコンを確認する際は、Storybookを確認してください。
状態
アイコンの色は、使う場所のテキストの色に準拠します。SmartHR UIではcolorを指定せず、使われているコンポーネントの色の指定に従います。
使い方
特定のテキストリンクを表す場合は、以下のアイコンを装飾として使います。これはリンクされるテキストが異なっていても、クリック時に同じ挙動になることを示すためです。
使用箇所 | 設置するアイコン | 備考 |
---|---|---|
新規ウィンドウ(新規タブ)で開くテキストリンク | テキストの後ろに「新規ウィンドウ」アイコン(fa-external-link )を設置 | リンク先がSmartHRの内部ページ、外部サイトに関わらず新規ウィンドウで開く場合は付与します。 |
ヘルプセンターのポップアップダイアログを開くテキストリンク | テキストの後ろに「ヘルプセンター」アイコン(fa-question-circle )を設置 |
参考文献
- https://www.lightningdesignsystem.com/icons/
- https://www.carbondesignsystem.com/guidelines/icons/usage/
Props
Name | Required | Type | Description |
---|---|---|---|
visuallyHiddenText | - | string | アイコンの説明テキスト (表示はされないが、 DOM 上に存在することで意味を明示可能) |
className | - | string | コンポーネントに適用するクラス名 |
color | - | string | 'TEXT_BLACK' | 'TEXT_GREY' | 'TEXT_DISABLED' | 'TEXT_LINK' | 'MAIN' | 'DANGER' | 'WARNING' | 'BRAND' | アイコンの色 |
size | - | string ,
number | アイコンの大きさ |