Icon

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

SmartHR UIではIconです。

アイコンを使う際の注意

アイコンは、情報の認知の手助けとして使ってください。

アイコンのみ表示する場合、ラベルと合わせて使うよりも認知負荷を与えます。十分に検討して使ってください。

アクセシビリティ

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

<Button variant="primary" square>
<FaPlusCircleIcon alt="追加" />
</Button>

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

アイコンの参照元

SmartHRプロダクトのアイコンは、Font Awesomeを使っています。アイコンのデザインコンセプトはFont Awesomeの公式サイトを確認してください。

SmartHR UIでは、React Iconsを通してFont Awesomeのライブラリを利用しています。

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

種類

Font Awesomeのアイコンをすべて網羅したものではありません。

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

<>
<FaAddressBookIcon />
<FaAddressCardIcon />
<FaAngleDoubleDownIcon />
<FaAngleDoubleLeftIcon />
<FaAngleDoubleRightIcon />
</>

状態

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

使い方

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

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

参考文献

Props

NameRequiredTypeDescription
alt-stringアイコンの説明テキスト
text-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalアイコンと並べるテキスト
iconGap-0, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 3.5, 4, 8, -0.25, -0.5, -0.75, -1, -1.25, -1.5, -2, -2.5, -3, -3.5, -4, -8, "X3S", "XXS", "XS", "S", "M", "L", "XL", "XXL", "X3L"アイコンと並べるテキストとの溝
right-false, true`true` のとき、アイコンを右側に表示する
className-stringコンポーネントに適用するクラス名
color-string | 'TEXT_BLACK' | 'TEXT_GREY' | 'TEXT_DISABLED' | 'TEXT_LINK' | 'MAIN' | 'DANGER' | 'WARNING' | 'BRAND'アイコンの色
size-string, numberアイコンの大きさ