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 以上を確保してください。

デザインパターン

特別なテキストリンク

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

使用箇所設置するアイコン備考
新規ウィンドウで開くテキストリンクテキストの右側新規ウィンドウ アイコン(FaUpRightFromSquareIcon)を配置(必須)リンク先がSmartHRの内部ページ、外部サイトに関わらず新規ウィンドウ(新規タブ)で開く場合は表示します。
ヘルプセンターを開くテキストリンクテキストの左側ヘルプセンター アイコン(FaCircleQuestionIcon)を配置(推奨)詳細はヘルプページへの動線を参照してください。

参考文献

Props

color
string | 'TEXT_BLACK' | 'TEXT_GREY' | 'TEXT_DISABLED' | 'TEXT_LINK' | 'MAIN' | 'DANGER' | 'WARNING' | 'BRAND'

アイコンの色

size非推奨
"XXS""XS""S""M""L""XL""XXL"

アイコンの大きさ(フォントサイズの抽象値) @deprecated 親要素やデフォルトフォントサイズが継承されるため固定値の指定は非推奨

alt
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

アイコンの説明テキスト

text
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

アイコンと並べるテキスト

iconGap
00.250.50.7511.251.522.533.548-0.25-0.5-0.75-1-1.25-1.5-2-2.5-3-3.5-4-8"XXS""XS""S""M""L""XL""XXL""X3S""X3L"

アイコンと並べるテキストとの溝

right
falsetrue

true のとき、アイコンを右側に表示する

className
string

コンポーネントに適用するクラス名