ログイン画面における主要SNSアイコンの実装方法（フロントエンド）

はじめに

皆さん、アプリのアカウント登録のときに他のSNSの情報を使ったログイン機能を実装したいときってありますよね！
今回はそのフロント部分について、主要なSNSのアイコンを実装する方法について紹介したいと思います。

実装するアイコン

• google
• github
• twitter
• linkedin
• facebook

大まかな手順

• react-iconsのインストール

terminal

npm install react-icons

• 使いたいSNSアイコンをインポート

auth.tsx

import {FcGoogle} from "react-icons/fc"

• アイコンの装飾

auth.tsx

<div 
  className="
    w-12
    h-12
    bg-white
    rounded-full
    flex
    items-center
    justify-center
    cursor-pointer
    hover:opacity-70
    transition
  "
>
  <FcGoogle size="24px"/>
</div>

ポイント

・react-iconsに主要SNSのアイコンが用意されている。
・Fcがついているもの以外は、色が付いていない（多分）ので、自分で色を指定してやる必要がある。
→ FcGoogleなどFc（FontAwesome Colors）がついているものはデフォルトでカラーが付いているアイコン。
その他の多くのアイコン、Fa（FontAwesome）、Ai（Ant Design Icons）、Io（Ionicons）、Si（Simple Icons）などはデフォルトで色がついていないので自分で指定する必要がある。

※ 今回使用したreact-icons

import {FcGoogle} from "react-icons/fc"
import {FaGithub, FaTwitter} from "react-icons/fa"
import { AiFillFacebook } from "react-icons/ai";
import { SiLinkedin } from "react-icons/si";

実装

auth.tsx

<div className="flex flex-row items-center gap-4 mt-8 justify-center">
    {/* 白い丸型を作り、その中にアイコンを表示させる */}
    <div 
      className="
        w-12
        h-12
        bg-white
        rounded-full
        flex
        items-center
        justify-center
        cursor-pointer
        hover:opacity-70
        transition
      "
    >
      <FcGoogle size="24px"/>
    </div>
    <div 
      className="
        w-12
        h-12
        bg-white
        rounded-full
        flex
        items-center
        justify-center
        cursor-pointer
        hover:opacity-70
        transition
      "
    >
      <FaGithub size="24px"/>
    </div>
    <div 
      className="
        w-12
        h-12
        bg-white
        rounded-full
        flex
        items-center
        justify-center
        cursor-pointer
        hover:opacity-70
        transition
      "
    >
      <AiFillFacebook size="24px" style={{ color: "#4267B2" }}/>
    </div>
    <div 
      className="
        w-12
        h-12
        bg-white
        rounded-full
        flex
        items-center
        justify-center
        cursor-pointer
        hover:opacity-70
        transition
      "
    >
      <FaTwitter size="24px" style={{ color: "#1DA1F2" }}/>
    </div>
    <div 
      className="
        w-12
        h-12
        bg-white
        rounded-full
        flex
        items-center
        justify-center
        cursor-pointer
        hover:opacity-70
        transition
      "
    >
      <SiLinkedin size="24px" style={{ color: "#0077B5" }}/>
    </div>
  </div>

ブラウザ画面

無事SNSのアイコンが追加されていますね！良きです!

終わりに

今回はログイン画面でよく使用する外部SNSのアイコンの実装方法（フロントエンド）について紹介しました。
その他の部分（入力フォームの作り方など）についても、他の記事で紹介しているので、良ければぜひ読んでみてください！
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
ログイン画面と登録画面の切り替え
placeholderの補足テキストを入力欄に残しておく方法

ご覧いただきありがとうございました！