アイコン

Webアプリを作る上でアイコンはかかせません。アイコンを表示するライブラリがいくつかあるのですが、今回はreact-iconsというライブラリを使用します。

react-iconsをインストールしましょう。

npm install react-icons

使用したいアイコンは、以下サイトにて探すことができます。

React Iconsreact-icons.github.io

今回はハートのアイコンを使います。

使用したいアイコンがあったら、クリックするとコードの記述方法が確認できます。

components配下にLike.tsxを作成しましょう。

その中に、以下のように記述します。

Like.tsx◎

import { FcLike } from "react-icons/fc";

export const Like = () => {
  return <FcLike />;
};

こちらのコンポーネントをApp.tsxにて呼び出しましょう。

App.tsx◎

...
import { PrimaryButton } from "./components/Button";
import { Like } from "./components/Likes";
...
      <PrimaryButton>button2</PrimaryButton>
      <div>
        <Like />
      </div>
...

以下のように表示されるかと思います。

次にこのiconをクリックした際に、薄い色のハートになるようにします。

isLikedというstateを定義しましょう。そして、FcLikeをクリックした際に、isLikedをfalseにしましょう。

Like.tsx◎

import { useState } from "react";
import { FcLike } from "react-icons/fc";

export const Like = () => {
  const [isLiked, setIsLiked] = useState(false);
  return <FcLike onClick={() => setIsLiked(false)} />;
};

そして、isLikedがfalseの場合は、FcLikePlaceholderというアイコンを表示し、そのアイコンをクリックした際にはisLikedをtrueとしましょう。ちなみに、以下のように条件分岐にてreturnするComponentを変更するやり方も一般的です。

Like.tsx◎

import { useState } from "react";
import { FcLike } from "react-icons/fc";
import { FcLikePlaceholder } from "react-icons/fc";

export const Like = () => {
  const [isLiked, setIsLiked] = useState(false);
  if (isLiked) return <FcLike onClick={() => setIsLiked(false)} />;
  return <FcLikePlaceholder onClick={() => setIsLiked(true)} />;
};

上記にてハートのアイコンをクリックすると、アイコンが変化するかと思います。