# アイコン Webアプリを作る上でアイコンはかかせません。アイコンを表示するライブラリがいくつかあるのですが、今回は`react-icons`というライブラリを使用します。 `react-icons`をインストールしましょう。 ```bash npm install react-icons ``` 使用したいアイコンは、以下サイトにて探すことができます。 {% embed url="" %} 今回はハートのアイコンを使います。使用したいアイコンがあったら、クリックするとコードの記述方法が確認できます。 `components`配下に`Like.tsx`を作成しましょう。その中に、以下のように記述します。 {% code title="Like.tsx◎" %} ``` import { FcLike } from "react-icons/fc"; export const Like = () => { return ; }; ``` {% endcode %} こちらのコンポーネントを`App.tsx`にて呼び出しましょう。

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

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

次にこのiconをクリックした際に、薄い色のハートになるようにします。 `isLiked`というstateを定義しましょう。そして、`FcLike`をクリックした際に、`isLiked`を`false`にしましょう。

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を変更するやり方も一般的です。

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)} />;
};

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