Reactでアイコン使うのに便利なreact-iconsの使い方

記事の概要

React初心者向けの記事です。
アイコンを表示させる方法は複数あると思いますが、Reactでアイコンを表示させるのに、
便利で簡単なReact iconsの使い方を紹介します。

React iconsとは何か？

色々なアイコンを簡単に利用することができるReact用のライブラリです。
詳しく知りたい方は、下記の公式サイトをご覧ください。読みやすくわかりやすいです。
https://react-icons.github.io/react-icons

簡単な利用の流れ

1.　npmでパッケージをインストール
2.　使いたいアイコンをインポート。
3.　インポートしたアイコンコンポーネントを呼び出す。

React iconsのインストール

~/your/Myproject

npm install react-icons --save

2017年5月にリリースされたnpmのバージョン5系以降、--saveはつけなくても良くなった。

基本の使い方

インストール後の基本的な使い方をご紹介します。
事前にReactプロジェクトを作成しておいてください。
今回は適当にTwitterのアイコンを表させてみたいと思います。

1.アイコンを探す。

アイコンはこちらの公式サイトから探せます。
https://react-icons.github.io/react-icons

アイコンを探す方法は２通り。

• 左メニューのカテゴリから探す
• 検索して探す。

今回はTwitterのアイコンを表示させたいのでTwitterで検索。

アイコンをクリックするとコンポーネント名をコピーできます。

2. React iconsをインポート

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

~/your/Myproject

import { AiFillTwitterCircle } from "react-icons/ai"

使いたいアイコンによって変わるので詳しくは公式サイトをみてください。

3. アイコンを表示（コンポーネントを呼び出す）

~/your/Myproject

function App() {  
  return (
    <>
      <AiFillTwitterCircle />
    </>
  )
}

以上が簡単な説明となります。
注意点は、Ant Design Iconsを使うなら"react-icons/ai";でインポート。
Bootstrap Iconを使うなら"react-icons/bs";をインポートと使いたいIconによって変わるので
ご注意ください。